/* ============================================================
 * GrammarBound — design tokens
 * Add this file as src/tokens.css and link it from every HTML
 * page BEFORE src/style.css (so existing rules can opt in to
 * the variables without specificity battles).
 *
 *     <link rel="stylesheet" href="/tokens.css" />
 *     <link rel="stylesheet" href="/style.css" />
 *
 * This file declares VALUES ONLY. It is intentionally additive
 * and does not override existing rules. The follow-up tasks
 * (see README §3–§8) replace hard-coded hex literals in
 * style.css and the inline <style> blocks with these tokens.
 * ============================================================ */

:root {
  /* ── Brand ───────────────────────────────────────────────── */
  --gb-navy:        #040F49;   /* header bg, footer bg, filter-btn active */
  --gb-indigo:      #1F3A8A;   /* PRIMARY action color — every solid CTA */
  --gb-indigo-50:   #F4EFE2;   /* eyebrow pill bg, hover tint */
  --gb-indigo-200:  #E4D5A8;   /* eyebrow pill border, secondary CTA border */
  --gb-cyan:        #C99B43;   /* header underline, focus ring, eyebrow dot */
  --gb-cyan-2:      #7C8AA0;   /* gradient end ONLY (see --gb-cta-gradient) */

  /* The hero gradient. ALLOWED ONLY ON:
     - landing-postcode-btn (index.html)
     - .features-cta .primary (features.html)
     - .feature-card.is-flagship (features.html)
     Any other "primary" button must use --gb-indigo as a solid fill. */
  --gb-cta-gradient: #C99B43;

  /* ── Data palette (catchments + probability bands) ────────
     Renamed from --boys-color / --girls-color / --mixed-color
     to make clear these are DATA colors, not brand colors. */
  --data-boys:      #2A4FA0;
  --data-girls:     #9C5570;
  --data-mixed:     #5E7245;
  --data-boys-fill:  rgba(42, 79, 160, 0.18);
  --data-girls-fill: rgba(156, 85, 112, 0.18);
  --data-mixed-fill: rgba(94, 114, 69, 0.18);

  --band-green:     #16A34A;   /* eligibility "high probability" */
  --band-amber:     #C99B43;
  --band-red:       #DC2626;
  --band-outside:   #64748B;

  /* ── Surfaces ────────────────────────────────────────────── */
  --surface-paper:  #FFFFFF;   /* cards */
  --surface-page:   #F8FAFC;   /* page background (cool) — map, account, plans */
  --surface-warm:   #FAFAF7;   /* warm paper — features.deep, admissions */
  --surface-muted:  #F1F5F9;   /* inset / score-panel-toggle */

  /* ── Ink ─────────────────────────────────────────────────── */
  --ink:            #0F172A;   /* H1, primary copy */
  --ink-2:          #1E293B;   /* body */
  --ink-muted:      #475569;   /* lede, secondary copy */
  --ink-faint:      #64748B;   /* meta, captions */
  --ink-quiet:      #94A3B8;   /* placeholder, distant meta */

  --line:           #E2E8F0;
  --line-soft:      #EEF2F7;

  /* ── Radii ───────────────────────────────────────────────── */
  --r-tag:          4px;       /* boundary-badge, ofsted-badge */
  --r-control:      8px;       /* every button, input, header-auth */
  --r-card:         12px;      /* landing-card, feature-card, tier-card */
  --r-pill:         999px;     /* nav-pill, eyebrow, status badges */

  /* ── Type scale ──────────────────────────────────────────── */
  --h1-display:     52px;      /* features, schools, plans heroes */
  --h1-page:        40px;      /* admissions, account, legal */
  --h1-overlay:     38px;      /* landing — sits over photo, slightly tighter */
  --h2:             28px;
  --h3:             19px;

  /* ── Header ──────────────────────────────────────────────── */
  --header-height:  72px;
  --header-logo-h:  40px;
  --header-rule:    3px solid var(--gb-cyan);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-pop:     0 4px 24px rgba(15, 23, 42, 0.12);

  /* ── Motion ──────────────────────────────────────────────── */
  --t-fast:         0.15s ease;
  --t-base:         0.2s ease;
}