/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css — Design System Tokens
   Agility Fellows Scholarship
   ───────────────────────────────────────────────────────────────────────────
   HOW TO USE:
   1. Load this file FIRST in functions.php (before all other CSS)
   2. Replace hardcoded values in other files with var(--token-name)
   3. Any future changes = edit here once, applies everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── BRAND COLOURS ────────────────────────────────────────────────────────
     Source of truth: fixes.css TOKENS comment, line 1
     These never change — all other colours derive from them.
     ──────────────────────────────────────────────────────────────────────── */
  --teal:             #004851;
  --teal-dark:        #003840;
  --teal-mid:         #00737F;
  --teal-alpha-7:     rgba(0, 72, 81, 0.07);
  --teal-alpha-12:    rgba(0, 72, 81, 0.12);
  --teal-alpha-18:    rgba(0, 72, 81, 0.18);
  --teal-alpha-30:    rgba(0, 72, 81, 0.30);

  --gold:             #C8962E;
  --gold-dark:        #A87A22;
  --gold-alpha-7:     rgba(200, 150, 46, 0.07);
  --gold-alpha-20:    rgba(200, 150, 46, 0.20);
  --gold-alpha-40:    rgba(200, 150, 46, 0.40);
  --gold-alpha-45:    rgba(200, 150, 46, 0.45);

  /* ── BACKGROUNDS ──────────────────────────────────────────────────────────
     --white:     pure white surfaces (cards, inputs, nav)
     --bg:        warm white page background (body)
     --off-white: tinted sections (stats bar, FAQ header, footer)
     ──────────────────────────────────────────────────────────────────────── */
  --white:            #FFFFFF;
  --bg:               #FDFCFA;
  --off-white:        #F7F6F2;

  /* ── TEXT ─────────────────────────────────────────────────────────────────
     FIX APPLIED: Standardised from 3 values to 2.
     OLD components.css: --text-pri: #1A1A1A, --text-sec: #4A4A4A (incorrect)
     CORRECT values from fixes.css (the live D3 design source):
     ──────────────────────────────────────────────────────────────────────── */
  --text-pri:         #1C1C1C;   /* headings, labels, primary content */
  --text-sec:         #6B7280;   /* body copy, descriptions, captions */
  --text-muted:       #9CA3AF;   /* placeholders, timestamps, hints */
  --text-white:       #FFFFFF;
  --text-white-75:    rgba(255, 255, 255, 0.75);
  --text-white-78:    rgba(255, 255, 255, 0.78);

  /* ── BORDERS ──────────────────────────────────────────────────────────────
     FIX APPLIED: Standardised from 3 values to 2.
     OLD components.css: --border: #E0DDD8 (incorrect)
     CORRECT value from fixes.css (D3 source):
     ──────────────────────────────────────────────────────────────────────── */
  --border:           #E2E0DB;   /* all cards, dividers, section borders */
  --border-input:     #D1D5DB;   /* form inputs only — slightly stronger */

  /* ── LAYOUT ───────────────────────────────────────────────────────────────
     Max-width and horizontal wrap padding (consistent across all pages)
     ──────────────────────────────────────────────────────────────────────── */
  --max-w:            1100px;
  --wrap-pad:         32px;
  --wrap-pad-mob:     20px;
  --wrap-pad-xs:      16px;

  /* ── SPACING SCALE ────────────────────────────────────────────────────────
     Based on 4px base grid. Use these instead of raw pixel values.
     ──────────────────────────────────────────────────────────────────────── */
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             20px;
  --sp-6:             24px;
  --sp-7:             28px;
  --sp-8:             32px;
  --sp-9:             36px;
  --sp-10:            40px;
  --sp-11:            44px;
  --sp-12:            48px;
  --sp-13:            52px;
  --sp-14:            56px;
  --sp-16:            64px;
  --sp-20:            80px;

  /* ── SECTION VERTICAL PADDING ─────────────────────────────────────────────
     FIX APPLIED: Standardised 4 different values to 3 clear tiers.
     Use these for section padding-top and padding-bottom.
     ──────────────────────────────────────────────────────────────────────── */
  --section-lg:       80px;   /* homepage sections: hero, about, eligibility, etc. */
  --section-md:       56px;   /* page headers, FAQ header */
  --section-sm:       44px;   /* FAQ body, sub-sections */

  /* ── CARD PADDING ──────────────────────────────────────────────────────────
     FIX APPLIED: Standardised from 5 values to 3 tiers.
     ──────────────────────────────────────────────────────────────────────── */
  --card-pad-sm:      24px;   /* small utility cards (date cards, stat chips) */
  --card-pad-md:      28px;   /* standard cards (eligibility, dates, CTA inline) */
  --card-pad-lg:      32px;   /* large cards (profile, form, login) */

  /* ── BORDER RADIUS ─────────────────────────────────────────────────────────
     FIX APPLIED: Standardised 5 mixed values to a clear scale.
     ──────────────────────────────────────────────────────────────────────── */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        8px;    /* buttons, inputs, small badges */
  --radius-lg:        12px;   /* standard cards (eligibility, dates, form card) */
  --radius-xl:        14px;   /* elevated/modal cards (profile, login form wrap) */
  --radius-2xl:       16px;   /* section-level cards (FAQ CTA, tc-sidebar) */
  --radius-3xl:       24px;   /* hero photo card, CTA banner */
  --radius-pill:      50px;   /* pill buttons, filter chips */

  /* ── INPUTS ────────────────────────────────────────────────────────────────
     FIX APPLIED: Standardised input height from 52px (form page) + 48px (elsewhere) → 48px everywhere.
     ──────────────────────────────────────────────────────────────────────── */
  --input-height:     48px;
  --input-radius:     var(--radius-md);
  --input-border:     1px solid var(--border);
  --input-pad:        0 14px;
  --input-font-size:  14px;
  --input-color:      var(--text-pri);

  /* ── BUTTONS ───────────────────────────────────────────────────────────────
     FIX APPLIED: Standardised button radius from 10px (some) + 8px (most) → 8px standard.
     ──────────────────────────────────────────────────────────────────────── */
  --btn-height-sm:    36px;
  --btn-height-md:    44px;
  --btn-height:       48px;
  --btn-height-lg:    50px;
  --btn-radius:       var(--radius-md);   /* 8px standard */
  --btn-font-size:    14px;
  --btn-font-weight:  600;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────
     Named scale for consistent use. Don't use raw px in components.
     ──────────────────────────────────────────────────────────────────────── */
  --font-base:        'Inter', sans-serif;

  --text-2xs:         9px;    /* selection card label (exception, keep minimal) */
  --text-xs:          10px;   /* eyebrows, uppercase labels, timestamps */
  --text-sm:          11px;   /* nav brand sub, footer col label */
  --text-base:        12px;   /* meta labels, step numbers */
  --text-md:          13px;   /* nav links, form labels, card meta */
  --text-body:        14px;   /* card body, list items, form values */
  --text-body-lg:     15px;   /* page body copy, about section, T&C */
  --text-lg:          16px;   /* section sub-headings, FAQ search */
  --text-xl:          17px;   /* card titles, highlighted text */
  --text-2xl:         18px;   /* date values, card feature numbers */
  --text-3xl:         20px;   /* FAQ CTA heading, small h3 */
  --text-4xl:         22px;   /* modal headings, stat values */

  /* Headings — FIX APPLIED: reduced from 5+ values per level to 3 clear sizes */
  --text-h3:          24px;   /* section sub-headings */
  --text-h2-sm:       30px;   /* section-head titles (selection, dates) */
  --text-h2:          36px;   /* eligibility, page headers */
  --text-h2-lg:       40px;   /* about section */
  --text-h1:          44px;   /* CTA panel, login heading */
  --text-h1-lg:       48px;   /* FAQ page title */
  --text-hero:        60px;   /* homepage hero h1 */

  /* Eyebrow labels */
  --eyebrow-size:     10px;
  --eyebrow-ls:       3px;    /* letter-spacing */
  --eyebrow-weight:   700;

  /* ── NAVIGATION ─────────────────────────────────────────────────────────── */
  --nav-height:       68px;
  --nav-bg:           var(--white);
  --nav-border:       var(--border);
  --nav-z:            200;

  /* ── SHADOWS ────────────────────────────────────────────────────────────── */
  --shadow-xs:        0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:        0 20px 60px rgba(0, 72, 81, 0.18);
  --shadow-teal:      0 8px 24px rgba(0, 72, 81, 0.30);
  --shadow-gold:      0 8px 24px rgba(200, 150, 46, 0.45);
  --shadow-float:     0 8px 40px rgba(0, 72, 81, 0.12);  /* hero photo card */

  /* ── TRANSITIONS ────────────────────────────────────────────────────────── */
  --t-fast:           0.12s ease;
  --t-base:           0.15s ease;
  --t-mid:            0.22s ease;
  --t-slow:           0.30s ease;
  --t-page:           0.28s cubic-bezier(0.4, 0, 0.2, 1);  /* mobile menu slide */

  /* ── Z-INDEX SCALE ──────────────────────────────────────────────────────── */
  --z-base:           0;
  --z-raised:         10;
  --z-sticky:         50;
  --z-nav:            200;
  --z-mobile-menu:    300;
  --z-modal:          400;
  --z-toast:          500;

}

/* ─── REMINDER: apply fixes to components.css ─────────────────────────────
   These variables replace the incorrect values in the old :root block
   in components.css. After confirming tokens.css loads first, update
   components.css :root to match:

   OLD → NEW
   --text-pri: #1A1A1A  →  --text-pri: #1C1C1C
   --text-sec: #4A4A4A  →  --text-sec: #6B7280
   --border:   #E0DDD8  →  --border:   #E2E0DB
   body bg: #FFFFFF     →  body bg: #FDFCFA   (or use var(--bg))
   ──────────────────────────────────────────────────────────────────────── */