/* ============================================================
   PrepBenchmark · tokens.css
   All design tokens. Load FIRST.
   ============================================================ */
:root {
  /* ---- Brand color (locked) ---- */
  --color-navy:          #112240; /* Primary Navy · header, footer, nav, primary buttons */
  --color-navy-2:        #243B53; /* Secondary Navy · cards, table headers, secondary sections */
  --color-gold:          #C9A227; /* Antique Gold · scores, badges, stars, laurels, rings, ONE top CTA */
  --color-gold-deep:     #A8861D; /* hover state for gold CTA only */
  /* Gold is used for small uppercase labels too, where #A8861D only reaches
     3.25:1 and fails WCAG AA. This darker gold clears 4.5:1 on both the page
     background and cards. Text only; the CTA gold above is unchanged. */
  --color-gold-text:     #8A6D16;
  --color-bg:            #FAF8F2; /* warm off-white site background */
  --color-surface:       #FFFFFF; /* cards on the warm background */
  --color-border:        #E5E7EB; /* borders and dividers */
  --color-success:       #16A34A; /* positive indicators ONLY */
  --color-ink:           #1B2233; /* body text on warm background */
  --color-ink-muted:     #57607A; /* secondary text on light */
  --color-ink-on-navy:   #F5F2E9; /* warm white text on navy */
  --color-ink-on-navy-2: #AAB6CA; /* muted text on navy */
  --color-track:         #E9E5DA; /* empty portion of rings / bars / stars on light */

  /* ---- Typography ---- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; /* logo + major headlines ONLY */
  --font-sans:  "Inter", "Helvetica Neue", Arial, sans-serif;          /* everything else */
  --fs-xs:   0.75rem;   /* 12 · eyebrows, table meta */
  --fs-sm:   0.875rem;  /* 14 · nav, table body, captions */
  --fs-base: 1rem;      /* 16 · body */
  --fs-md:   1.125rem;  /* 18 · lede text */
  --fs-lg:   1.375rem;  /* 22 · card titles (sans) */
  --fs-xl:   1.75rem;   /* 28 · section headlines (serif) */
  --fs-2xl:  2.375rem;  /* 38 · page headlines (serif) */
  --fs-3xl:  3.25rem;   /* 52 · hero headline (serif, desktop) */
  --lh-tight: 1.12;
  --lh-snug:  1.35;
  --lh-body:  1.65;
  --tracking-caps: 0.14em; /* letter-spacing for uppercase eyebrows */

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---- Shape & elevation ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 34, 64, 0.06), 0 1px 3px rgba(17, 34, 64, 0.08);
  --shadow-md: 0 4px 10px rgba(17, 34, 64, 0.08), 0 12px 32px rgba(17, 34, 64, 0.10);

  /* ---- Motion & focus ---- */
  --transition: 160ms ease;
  --focus-on-light: var(--color-navy-2); /* focus outline color on light surfaces */
  --focus-on-dark:  var(--color-gold);   /* focus outline color on navy surfaces */

  /* ---- Layout ---- */
  --container: 1200px;
  /* Height of the sticky offer bar + header. Anything that scrolls to a target,
     or sticks to the top, must clear this or it lands underneath the header. */
  --sticky-top: 7rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}