/* ============================================================================
   STRONG INSURANCE SERVICES — DESIGN TOKENS (tokens.css)
   Three-layer token architecture: Primitive -> Semantic -> Component
   Technique 4: Design-System / Component-Driven
   Small-town warmth layered onto a crisp, trustworthy system.
   ============================================================================ */

:root {
  /* ========================================================================
     LAYER 1 — PRIMITIVE TOKENS (raw values, no meaning)
     ======================================================================== */

  /* --- Brand color ramps ---------------------------------------------- */
  /* Strong navy (their own deep serif-navy) */
  --c-navy-50:  #eef1f8;
  --c-navy-100: #d6ddee;
  --c-navy-300: #8a98c4;
  --c-navy-500: #3a4a86;
  --c-navy-700: #283766;
  --c-navy-800: #20305c;
  --c-navy-900: #1f2a52;
  --c-navy-950: #161e3d;

  /* Brick / maroon (Strong secondary, warmth) */
  --c-brick-400: #b85a3a;
  --c-brick-500: #9c4422;
  --c-brick-600: #7E300C;
  --c-brick-700: #7D0B0B;

  /* Plateau warm tan / gold (the small-town warmth) */
  --c-gold-200: #efe6c8;
  --c-gold-300: #e2d39a;
  --c-gold-400: #d3c075;
  --c-gold-500: #c2ab57;
  --c-gold-600: #a8903f;

  /* Erie co-brand blue — RESERVED for the Erie badge ONLY */
  --c-erie-500: #005fac;
  --c-erie-600: #004f8f;

  /* Warm neutrals — softened "paper" surfaces, not cold grey */
  --c-paper-50:  #fbf9f4;   /* warm off-white page */
  --c-paper-100: #f5f0e6;   /* warm cream panel */
  --c-paper-200: #ece4d4;   /* warm border */
  --c-stone-300: #cfc4b0;
  --c-stone-400: #a89c86;
  --c-stone-500: #7c7160;
  --c-ink-700:   #4a4336;   /* warm body text */
  --c-ink-800:   #322d24;
  --c-ink-900:   #211d17;   /* warm near-black heading */
  --c-white:     #ffffff;

  /* Plateau accent green (subtle outdoorsy nod) */
  --c-plateau-500: #4a6b4d;
  --c-plateau-600: #3c5a40;

  /* Feedback */
  --c-success-500: #3c7a4e;

  /* --- Spacing scale (4px base) --------------------------------------- */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* --- Type scale ----------------------------------------------------- */
  --fz-xs:   0.78rem;
  --fz-sm:   0.875rem;
  --fz-base: 1rem;
  --fz-md:   1.125rem;
  --fz-lg:   1.32rem;
  --fz-xl:   1.7rem;
  --fz-2xl:  2.25rem;
  --fz-3xl:  3rem;
  --fz-4xl:  3.85rem;

  --ff-serif: "Lora", "Georgia", "Times New Roman", serif;
  --ff-sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

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

  /* --- Radius --------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-full: 999px;

  /* --- Shadow (warm-tinted, soft) ------------------------------------- */
  --sh-sm:  0 1px 2px rgba(33, 29, 23, 0.06);
  --sh-md:  0 4px 14px rgba(33, 29, 23, 0.08);
  --sh-lg:  0 14px 38px rgba(33, 29, 23, 0.12);
  --sh-xl:  0 26px 60px rgba(31, 42, 82, 0.18);

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

  /* --- Layout --------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 880px;

  /* ========================================================================
     LAYER 2 — SEMANTIC TOKENS (purpose aliases)
     ======================================================================== */
  --color-bg:            var(--c-paper-50);
  --color-surface:       var(--c-white);
  --color-surface-warm:  var(--c-paper-100);
  --color-surface-deep:  var(--c-navy-900);
  --color-border:        var(--c-paper-200);
  --color-border-strong: var(--c-stone-300);

  --color-fg:            var(--c-ink-800);
  --color-fg-muted:      var(--c-stone-500);
  --color-heading:       var(--c-navy-900);
  --color-on-deep:       var(--c-paper-50);
  --color-on-deep-muted: #b9c2dd;

  --color-primary:        var(--c-navy-900);
  --color-primary-hover:  var(--c-navy-700);
  --color-accent:         var(--c-brick-600);   /* warm brick CTA */
  --color-accent-hover:   var(--c-brick-500);
  --color-gold:           var(--c-gold-400);
  --color-gold-deep:      var(--c-gold-600);
  --color-erie:           var(--c-erie-500);

  --space-gutter:  var(--sp-4);
  --space-block:   var(--sp-6);
  --space-section: var(--sp-9);

  /* ========================================================================
     LAYER 3 — COMPONENT TOKENS
     ======================================================================== */
  /* Button */
  --btn-radius:     var(--r-full);
  --btn-pad-y:      0.85rem;
  --btn-pad-x:      1.6rem;
  --btn-primary-bg: var(--color-accent);
  --btn-primary-fg: var(--c-white);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-ghost-fg:   var(--color-heading);
  --btn-ghost-border: var(--color-border-strong);

  /* Card */
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
  --card-radius:  var(--r-lg);
  --card-pad:     var(--sp-5);
  --card-shadow:  var(--sh-md);
  --card-shadow-hover: var(--sh-lg);

  /* Nav */
  --nav-h: 76px;
  --nav-bg: rgba(251, 249, 244, 0.92);
  --nav-border: var(--color-border);

  /* Input */
  --input-bg:     var(--c-white);
  --input-border: var(--color-border-strong);
  --input-radius: var(--r-md);
  --input-focus:  var(--color-primary);

  /* Badge */
  --badge-erie-bg:  var(--c-erie-500);
  --badge-erie-fg:  var(--c-white);
}