/* ============================================================
   Signling · Design System · LAYER 1 — PRIMITIVES
   Raw, theme-agnostic values. Never reference these directly in
   components — use the SEMANTIC tokens (layer 2). Change a brand
   hue here and it ripples through both themes + app + landing.
   ============================================================ */
:root {
  /* --- Brand: Cobalt blue --- */
  --p-blue-50:#F1F6FF;  --p-blue-100:#E4EEFF; --p-blue-200:#BFD8FF; --p-blue-300:#8FB6FB;
  --p-blue-400:#5B93F8; --p-blue-500:#3B82F6; --p-blue-600:#2B6FF3; --p-blue-700:#1E4FD6;
  --p-blue-800:#173A8C; --p-blue-900:#12275A; --p-blue-950:#0C1B40;

  /* --- Accent: Sunshine yellow --- */
  --p-yellow-300:#FFE79E; --p-yellow-400:#FFD23F; --p-yellow-500:#FFB300; --p-yellow-700:#C98A00;

  /* --- Support --- */
  --p-coral-400:#FF9A8E; --p-coral-500:#FF7A6B; --p-coral-600:#E0503F;
  --p-mint-400:#5FE3C0;  --p-mint-500:#37D6A8;  --p-mint-600:#23AD86;

  /* --- Neutral (cool grey, faint blue cast) --- */
  --p-neutral-0:#FFFFFF;  --p-neutral-50:#F7F9FE;  --p-neutral-100:#EEF2FB; --p-neutral-200:#DCE3F2;
  --p-neutral-300:#C2CCE2; --p-neutral-400:#9AA6C4; --p-neutral-500:#6B769A; --p-neutral-600:#4E587A;
  --p-neutral-700:#38415E; --p-neutral-800:#232A42; --p-neutral-900:#141A2E; --p-neutral-950:#0B0F1E;

  /* --- Fixed semantic hues --- */
  --p-red-500:#E5484D; --p-red-400:#FF6369; --p-green-500:#30A46C;

  /* --- Type --- */
  --p-font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Radii --- */
  --p-radius-xs:8px; --p-radius-sm:14px; --p-radius-md:22px; --p-radius-lg:32px; --p-radius-full:999px;

  /* --- Motion --- */
  --p-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --p-ease-out:cubic-bezier(.2,.7,.2,1);
}
/* ============================================================
   Signling · Design System · LAYER 2 — SEMANTIC (theme-aware)
   Role-based tokens. Components use THESE (via layer-3 aliases).
   Defined for light (default) and remapped for dark via both
   `prefers-color-scheme` (OS) and `[data-theme]` (manual toggle).
   The toggle must win over the OS media query in both directions.
   ============================================================ */

/* ---- LIGHT (default) ---- */
:root {
  --bg:            var(--p-blue-50);
  --surface:       var(--p-neutral-0);
  --surface-2:     var(--p-blue-50);
  --surface-sunk:  var(--p-blue-100);
  --border:        var(--p-blue-100);
  --border-strong: var(--p-blue-200);
  /* Winding lesson-path track. In light it matches the sunk surface (a soft
     blue). Dark needs its own value — the sunk surface there is near-black and
     the connectors vanished against the page. */
  --path-track:    var(--p-blue-100);

  --text:          var(--p-neutral-800);
  --text-muted:    #5A6485; /* darker than p-neutral-500 → WCAG AA 4.5:1 even on the light --bg */
  --heading:       var(--p-blue-900);

  /* Typography roles (theme-agnostic — set once, inherited by dark). */
  --font-display:  var(--p-font-display);
  --font-body:     var(--p-font-body);

  --primary:       var(--p-blue-700);
  --primary-hover: var(--p-blue-800);
  --on-primary:    #FFFFFF;

  --accent:        var(--p-yellow-400);
  --accent-strong: var(--p-yellow-500);
  --on-accent:     var(--p-blue-900);

  /* Primary button = solid cobalt + white in BOTH themes (defined once in :root, not
     overridden in dark). Decoupled from --primary, which stays a brighter blue for
     accents/links on dark. White on --p-blue-700 = ~6.7:1 (AA). */
  --btn-bg:        var(--p-blue-700);
  --btn-fg:        #FFFFFF;
  --btn-press:     var(--p-blue-800);
  --btn-shadow-ink: #143aa3; /* darker cobalt — the landing button's "sticker" hard-shadow edge */
  /* Disabled = an explicit muted pill, NOT opacity (opacity composites against the
     page bg and inverts between themes — the bug that made dark-mode buttons vanish).
     These flip per theme so "disabled" reads the same in light and dark. */
  --btn-disabled-bg: #CBD3E6;
  --btn-disabled-fg: #838DA8;

  --success:       var(--p-mint-600);
  --danger:        var(--p-red-500);
  --ring:          var(--p-blue-700);

  /* State surface-tints (answer chips / feedback banners) + accent inks (glyphs on tint tiles).
     Light values match the pre-dark-mode hardcoded colors exactly, so light is unchanged. */
  --success-surface:    #DCEBC2;
  --on-success-surface: #2F6B16;
  --danger-surface:     #F8C9BD;
  --on-danger-surface:  #9A2A10;
  --accent-surface:     var(--p-yellow-300);
  --accent-ink:         var(--p-yellow-700);
  --chip-selected:      var(--accent-surface); /* selected filter pill fill */
  --indigo-ink:         #6E62F7;
  --gold-ink:           #8A5A00; /* dark amber — gold used as TEXT, AA 4.5:1 on light surfaces */

  /* Tinted tiles / glows / solid badges / scrims — theme-aware so decor and state colors
     flip with the theme instead of being hardcoded per component (the gap that left
     off-brand orange tiles and a washed-out dark mode). */
  --primary-surface:    #DBE5FF;              /* soft cobalt tile */
  --primary-ink:        var(--p-blue-700);
  --glow-accent:        rgba(244,183,64,.34); /* hero halo */
  --success-solid:      #3F7D1F;              /* solid success badge, white glyph */
  --danger-solid:       #A3260F;
  --on-solid:           #FFFFFF;
  --scrim:              rgba(10,14,31,.50);   /* modal backdrop */
  --media-overlay:      rgba(41,47,50,.72);   /* controls over sign media */

  --elev-card:     0 10px 26px -14px rgba(23,58,140,.18);
  --elev-pop:      0 26px 60px -30px rgba(23,58,140,.30);

  color-scheme: light;
}

/* ---- DARK: shared decls (applied by media query + explicit toggle) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--p-neutral-950);
    --surface:       var(--p-neutral-900);
    --surface-2:     var(--p-neutral-800);
    --surface-sunk:  #10162A;
    --border:        rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.18);
    --path-track:    var(--p-neutral-700);

    --text:          #E7ECF7;
    --text-muted:    #9AA6C4;
    --heading:       #F3F6FF;

    --primary:       var(--p-blue-500);
    --primary-hover: var(--p-blue-400);
    --on-primary:    #0B0F1E;

    --accent:        var(--p-yellow-400);
    --accent-strong: var(--p-yellow-300);
    --on-accent:     #10162A;

    --success:       var(--p-mint-500);
    --danger:        var(--p-red-400);
    --ring:          var(--p-blue-400);

    /* Disabled pill for dark — a visible dark slate, not a washed-out cobalt. */
    --btn-disabled-bg: #242C41;
    --btn-disabled-fg: #7C87A3;

    --success-surface:    #17331F;
    --on-success-surface: #A6E6BC;
    --danger-surface:     #3A211C;
    --on-danger-surface:  #FCB6A6;
    --accent-surface:     #2B2714;
    --accent-ink:         var(--p-yellow-400);
    --chip-selected:      #4A3D0F; /* a filled amber so the selected pill carries weight on dark, matching light */
    --indigo-ink:         #A99CFF;
    --gold-ink:           var(--p-yellow-400);

    --primary-surface:    #1E2C4C;
    --primary-ink:        var(--p-blue-400);
    --glow-accent:        rgba(244,183,64,.15);
    --scrim:              rgba(0,0,0,.60);

    --elev-card:     0 1px 2px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.7);
    --elev-pop:      0 30px 70px -28px rgba(0,0,0,.8);

    color-scheme: dark;
  }
}

/* Manual toggle wins over OS in both directions */
:root[data-theme="dark"] {
  --bg:            var(--p-neutral-950);
  --surface:       var(--p-neutral-900);
  --surface-2:     var(--p-neutral-800);
  --surface-sunk:  #10162A;
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);

  --text:          #E7ECF7;
  --text-muted:    #9AA6C4;
  --heading:       #F3F6FF;

  --primary:       var(--p-blue-500);
  --primary-hover: var(--p-blue-400);
  --on-primary:    #0B0F1E;

  --accent:        var(--p-yellow-400);
  --accent-strong: var(--p-yellow-300);
  --on-accent:     #10162A;

  --success:       var(--p-mint-500);
  --danger:        var(--p-red-400);
  --ring:          var(--p-blue-400);

  /* Disabled pill for dark — a visible dark slate, not a washed-out cobalt. */
  --btn-disabled-bg: #242C41;
  --btn-disabled-fg: #7C87A3;

  --success-surface:    #17331F;
  --on-success-surface: #A6E6BC;
  --danger-surface:     #3A211C;
  --on-danger-surface:  #FCB6A6;
  --accent-surface:     #2B2714;
  --accent-ink:         var(--p-yellow-400);
  --indigo-ink:         #A99CFF;
  --gold-ink:           var(--p-yellow-400);

  --primary-surface:    #1E2C4C;
  --primary-ink:        var(--p-blue-400);
  --glow-accent:        rgba(244,183,64,.15);
  --scrim:              rgba(0,0,0,.60);

  --elev-card:     0 1px 2px rgba(0,0,0,.5), 0 18px 40px -20px rgba(0,0,0,.7);
  --elev-pop:      0 30px 70px -28px rgba(0,0,0,.8);

  color-scheme: dark;
}
/* ============================================================
   Signling · Design System · LAYER 3 — ALIASES / COMPAT
   Maps the app's existing --sg-* names and the landing's
   --blue-* / --yellow names onto the SEMANTIC tokens, so old
   component/landing CSS keeps working and flips with the theme.
   New code should prefer the semantic tokens directly.
   ============================================================ */
:root {
  /* ---- App (--sg-*) ---- */
  --sg-bg:           var(--bg);
  --sg-card:         var(--surface);
  --sg-cream-warm:   var(--surface-sunk);
  --sg-peach:        var(--surface-sunk);
  --sg-lavender:     var(--surface-2);
  --sg-track:        var(--surface-sunk);
  --sg-path-track:   var(--path-track);
  --sg-border:       var(--border);
  --sg-text:         var(--text);
  --sg-text-muted:   var(--text-muted);
  --sg-ink:          var(--heading);
  --sg-primary:      var(--primary);
  --sg-primary-press:var(--primary-hover);
  --sg-accent:       var(--accent);
  --sg-amber:        var(--accent);
  --sg-amber-light:  var(--accent-surface);
  --sg-chip-selected: var(--chip-selected);
  --sg-gold:         var(--p-yellow-700);
  --sg-success:      var(--success);
  --sg-danger:       var(--danger);
  --sg-radius:       var(--p-radius-sm);
  --sg-radius-lg:    var(--p-radius-md);
  --sg-maxw:         600px;
  --sg-font:         var(--p-font-body);
  --sg-font-body:    var(--p-font-body);
  --sg-font-display: var(--p-font-display);

  /* ---- Landing (--blue-* / --yellow / etc.) ---- */
  --blue-900:var(--heading); --blue-800:var(--heading); --blue-700:var(--primary);
  --blue-600:var(--p-blue-600); --blue-500:var(--p-blue-500); --blue-200:var(--border-strong);
  --blue-100:var(--surface-sunk); --blue-50:var(--surface-2);
  --yellow:var(--accent); --yellow-deep:var(--accent-strong);
  --coral:var(--p-coral-500); --mint:var(--p-mint-500);
  --cream:var(--surface-2); --white:var(--surface);
  --ink:var(--text); --ink-soft:var(--text-muted); --ring:var(--ring);
  --shadow-sticker:0 6px 0;
  --r-lg:var(--p-radius-lg); --r-md:var(--p-radius-md); --r-sm:var(--p-radius-sm);
  --maxw:1140px; --ease:var(--p-ease-bounce);
}