/* ============================================================================
   STRONG INSURANCE — DESIGN SYSTEM TOKENS
   Technique 4: Design-System / Component-Driven
   Three-layer architecture: PRIMITIVE -> SEMANTIC -> COMPONENT
   Aesthetic: crisp, modern, trust-forward. Erie-blue-forward (#005fac),
   anchored by Strong's navy (#1f2a52). Systematic corporate-trust feel.
   ============================================================================ */

/* === LAYER 1: PRIMITIVES =================================================== */
/* Raw values. The single source of truth for every measurement in the system. */
:root {
  /* --- Brand color scales (generated as tints/shades of the two anchors) --- */
  /* Erie blue scale — the system's primary action / accent family */
  --blue-50:  #eaf3fb;
  --blue-100: #cfe3f5;
  --blue-200: #9fc6ea;
  --blue-300: #5e9fd9;
  --blue-400: #2d7ec6;
  --blue-500: #005fac;   /* Erie blue — the hero hue */
  --blue-600: #00538f;
  --blue-700: #004577;
  --blue-800: #053a63;
  --blue-900: #0a2e4d;

  /* Strong navy scale — the anchor / structural family */
  --navy-50:  #eef0f6;
  --navy-100: #d6dbe9;
  --navy-200: #aab2cf;
  --navy-300: #6f7aa3;
  --navy-400: #3f4d7c;
  --navy-500: #2a3760;
  --navy-600: #1f2a52;   /* Strong navy — the anchor */
  --navy-700: #182142;
  --navy-800: #121931;
  --navy-900: #0c1122;

  /* Neutral / slate scale — text, surfaces, borders */
  --slate-0:   #ffffff;
  --slate-50:  #f7f9fc;
  --slate-100: #eef1f6;
  --slate-200: #e0e5ee;
  --slate-300: #c7cfdd;
  --slate-400: #9aa4ba;
  --slate-500: #6b7689;
  --slate-600: #4c5667;
  --slate-700: #353d4b;
  --slate-800: #222833;
  --slate-900: #141821;

  /* Supporting accents (Strong's own palette + signal colors) */
  --gold-400:  #e0cf8a;
  --gold-500:  #d3c075;   /* Strong tan/gold */
  --gold-600:  #b8a259;
  --brick-500: #7e300c;   /* Strong maroon/brick — used sparingly */
  --green-500: #2f8f5b;   /* success / "covered" signal */
  --amber-500: #e0a02e;   /* review stars */

  /* --- Typography primitives --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Modular type scale (1.250 major-third) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  2.875rem;  /* 46 */
  --fs-5xl:  3.625rem;  /* 58 */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.62;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.14em;

  /* --- Spacing (4px base, geometric-ish) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  /* --- Radius --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* --- Shadows (cool-tinted to read "corporate trust", not warm) --- */
  --shadow-xs: 0 1px 2px rgba(12, 17, 34, 0.06);
  --shadow-sm: 0 2px 6px rgba(12, 17, 34, 0.08);
  --shadow-md: 0 10px 24px -8px rgba(12, 17, 34, 0.16);
  --shadow-lg: 0 24px 48px -16px rgba(12, 17, 34, 0.22);
  --shadow-ring: 0 0 0 4px rgba(0, 95, 172, 0.16);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 920px;
  --header-h: 76px;
}

/* === LAYER 2: SEMANTIC ===================================================== */
/* Purpose-based aliases. Components read THESE, never the raw primitives. */
:root {
  /* Surfaces */
  --color-bg:            var(--slate-50);
  --color-surface:       var(--slate-0);
  --color-surface-muted: var(--slate-100);
  --color-surface-inverse: var(--navy-600);
  --color-surface-inverse-2: var(--navy-700);

  /* Text */
  --color-text:        var(--slate-800);
  --color-text-muted:  var(--slate-500);
  --color-text-soft:   var(--slate-400);
  --color-text-invert: var(--slate-0);
  --color-text-invert-muted: rgba(255, 255, 255, 0.78);

  /* Brand roles */
  --color-primary:        var(--blue-500);  /* Erie blue leads */
  --color-primary-hover:  var(--blue-600);
  --color-primary-active:  var(--blue-700);
  --color-anchor:         var(--navy-600);  /* Strong navy structure */
  --color-anchor-deep:    var(--navy-800);
  --color-accent:         var(--gold-500);  /* warm spark, used sparingly */
  --color-brick:          var(--brick-500);

  /* Lines & focus */
  --color-border:       var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-focus-ring:   var(--shadow-ring);

  /* Signals */
  --color-success: var(--green-500);
  --color-star:    var(--amber-500);

  /* Section rhythm */
  --section-y: var(--space-10);
  --gap-card:  var(--space-5);
}

/* === LAYER 3: COMPONENT ==================================================== */
/* Component-scoped tokens. Tweak a component without touching its CSS rules. */
:root {
  /* Button */
  --btn-radius: var(--radius-pill);
  --btn-pad-y: 0.85rem;
  --btn-pad-x: 1.5rem;
  --btn-fs: var(--fs-base);
  --btn-fw: var(--fw-semibold);
  --btn-primary-bg: var(--color-primary);
  --btn-primary-fg: var(--slate-0);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-ghost-fg: var(--color-anchor);

  /* Card (coverage / agent / location / value) */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-6);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Nav */
  --nav-h: var(--header-h);
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-border: var(--color-border);
  --nav-link: var(--slate-600);
  --nav-link-active: var(--color-anchor);

  /* Badge (Erie co-brand, eyebrow) */
  --badge-bg: var(--blue-50);
  --badge-fg: var(--blue-700);
  --badge-radius: var(--radius-pill);

  /* Input */
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-md);
  --input-pad: 0.8rem 1rem;

  /* Footer */
  --footer-bg: var(--navy-800);
  --footer-fg: rgba(255, 255, 255, 0.74);
}