/* ================================================================
   SPRINGBOARD ACADEMY — DESIGN TOKENS (single source of truth)
   ----------------------------------------------------------------
   This is the ONLY file where raw styling values (hex colours, px
   sizes, font names) are allowed to live. Every module links this
   file FIRST, then references the tokens via var(--name). Change a
   value here and it propagates everywhere.

   A "token" = a named CSS custom property standing in for a raw
   value, so the value has exactly one home.

   Load order requirement: this file must load BEFORE any stylesheet
   that consumes it (global.css, module sheets, inline <style>).
   ================================================================ */

:root {

    /* ------------------------------------------------------------
       1. BRAND COLOURS
       The brand red is the one value already consistent across the
       whole site; it anchors everything else.
       ------------------------------------------------------------ */
    --primary:        #EC1D24;   /* Springboard brand red */
    --primary-dark:   #b5141a;   /* pressed / hover-darker red */
    --primary-light:  #fef2f2;   /* near-white pink TINT (backgrounds) */
    --primary-bright: #f04048;   /* an actual LIGHTER red (accents) */
    /* NOTE: --primary-light and --primary-bright were historically
       the SAME token name (--primary-light) meaning two different
       things across modules. They are now split so no name carries
       two meanings. */

    /* ------------------------------------------------------------
       2. NEUTRALS — backgrounds, surfaces, borders, text
       ------------------------------------------------------------ */
    --navy:           #0f172a;   /* deep heading / dark UI accent */
    --navy-mid:       #1e293b;
    --bg:             #f8fafc;   /* page background */
    --bg-warm:        #fff8f8;   /* faint warm page background */
    --surface:        #ffffff;   /* card / panel background */
    --border:         #e2e8f0;   /* default hairline border */
    --border-warm:    #f0d0d0;   /* warm-tinted border */
    --text:           #0f172a;   /* primary body text */
    --text-muted:     #64748b;   /* secondary text */
    --text-light:     #94a3b8;   /* tertiary / placeholder text */

    /* ------------------------------------------------------------
       3. SEMANTIC STATE COLOURS
       Feedback colours were previously invented ad hoc per module
       (--ok, --success, --danger, --warning). Standardised here.
       ------------------------------------------------------------ */
    --success:        #1c9d5b;   /* positive / confirmed */
    --warning:        #f57f17;   /* caution */
    --danger:         #c62828;   /* error / destructive */
    --info:           #2563eb;   /* neutral information */

    /* ------------------------------------------------------------
       4. TYPOGRAPHY — font families
       Canonical body face is Inter; headings are Merriweather.
       --font-hindi is the Devanagari companion used by the exams
       Hindi language path.
       ------------------------------------------------------------ */
    --font-heading:   'Merriweather', Georgia, serif;
    --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-hindi:     'Noto Sans Devanagari', 'Inter', sans-serif;

    /* ------------------------------------------------------------
       5. TYPE SCALE — a fixed set of font sizes (rem-based so it
       respects the user's browser font-size). Replaces one-off
       hardcoded font-size values.
       ------------------------------------------------------------ */
    --text-xs:        0.75rem;   /* 12px */
    --text-sm:        0.875rem;  /* 14px */
    --text-base:      1rem;      /* 16px — body default */
    --text-lg:        1.25rem;   /* 20px */
    --text-xl:        1.75rem;   /* 28px */
    --text-2xl:       2.25rem;   /* 36px — hero headings */

    /* ------------------------------------------------------------
       6. SPACING SCALE — one consistent rhythm for padding/margin/
       gap. Replaces magic numbers like "28px 20px 52px".
       ------------------------------------------------------------ */
    --space-1:        4px;
    --space-2:        8px;
    --space-3:        16px;
    --space-4:        24px;
    --space-4-5:      30px;   /* one-off between space-4/5, exams landing-page controls gap */
    --space-5:        32px;
    --space-6:        48px;
    --space-7:        56px;
    --space-8:        64px;

    /* ------------------------------------------------------------
       7. BORDER RADIUS
       --radius is the default corner. --radius-lg is the rounder
       corner some surfaces opt into (e.g. counsellor kiosk cards).
       ------------------------------------------------------------ */
    --radius-sm:      6px;
    --radius:         10px;
    --radius-lg:      16px;
    --radius-xl:      18px;      /* counsellor "futuristic" surfaces */
    --radius-pill:    999px;     /* fully rounded pills / avatars */

    /* ------------------------------------------------------------
       8. ELEVATION (shadows)
       ------------------------------------------------------------ */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow:         0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.14);

    /* ------------------------------------------------------------
       9. MOTION
       ------------------------------------------------------------ */
    --transition:     0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* ------------------------------------------------------------
       LAYOUT — uniform fixed site-header height across the
       public-facing site. Theme-independent (heights don't change
       in dark mode), so there is no dark override. Every in-scope
       header and its content offset references these.
       ------------------------------------------------------------ */
    --header-h:        78px;   /* desktop / tablet ≥769px */
    --header-h-mobile: 68px;   /* phones ≤768px */
}

/* ================================================================
   10. DARK THEME LAYER
   ----------------------------------------------------------------
   Opt-in via <html data-theme="dark"> (the toggle the exams portal
   already uses). It only overrides the NEUTRAL tokens — brand red,
   fonts, spacing, radii and the type scale are theme-independent.
   Because modules alias their local names to these canonical ones,
   dark mode flows through every module automatically once adopted.
   ================================================================ */
html[data-theme="dark"] {
    --bg:             #0f0f1f;   /* deep page background */
    --bg-warm:        #1e1e38;
    --surface:        #1a1a2e;   /* dark card / panel */
    --border:         #252550;
    --border-warm:    #2d2d58;
    --text:           #e0e0f5;   /* light primary text */
    --text-muted:     #a8a8c8;
    --text-light:     #9090c0;
    --primary-light:  rgba(236,29,36,0.10);  /* red tint on dark */
    --border-warm:    rgba(236,29,36,0.25);

    /* shadows need to be heavier to read on a dark background */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.40);
    --shadow:         0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.55);
}