/* ============================================================
   TOKENS.CSS — Design tokens for MATH RUN
   ------------------------------------------------------------
   Single source of truth for color, typography, spacing, radii,
   shadows and motion. Two themes are supported:

     - dark  (default, applied on :root without attributes)
     - light (applied via [data-theme="light"] on <html>)

   The active theme is set before first paint by the anti-flash
   script in index.html (see data-theme on <html>).

   Legacy tokens (--neon-green, --electric-blue, --card, ...) are
   kept as aliases mapped to the new semantic palette so existing
   screens keep working while they are progressively redesigned.
   ============================================================ */

/* ------------------------------------------------------------
   DARK THEME (default)
   ------------------------------------------------------------ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #0F1419;
  --bg-2:          #151B24;
  --surface:       #1C2430;
  --surface-2:     #232D3B;
  --surface-hover: #2A3646;
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Text */
  --text:          #E8EDF4;
  --text-muted:    #94A3B8;
  --text-faint:    #64748B;
  --text-on-accent:#FFFFFF;

  /* Semantic */
  --primary:       #3B82F6;
  --primary-hover: #2563EB;
  --success:       #22C55E;
  --error:         #EF4444;
  --warn:          #F59E0B;
  --info:          #38BDF8;

  /* Decorative accents (used to identify areas, not meaning) */
  --accent-indigo: #6366F1;
  --accent-teal:   #14B8A6;
  --accent-pink:   #EC4899;
  --accent-orange: #F97316;
  --accent-violet: #8B5CF6;
  --accent-yellow: #FACC15;
  --accent-green:  #22C55E;
  --accent-blue:   #38BDF8;

  /* Ambient background */
  --ambient-1:     rgba(99, 102, 241, 0.14);
  --ambient-2:     rgba(56, 189, 248, 0.10);
  --ambient-3:     rgba(34, 197, 94, 0.05);
  --ambient-photo-opacity: 0.45;
  --grid-line:     rgba(255, 255, 255, 0.03);

  /* Focus */
  --focus-color:   var(--primary);

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 30px 60px rgba(0, 0, 0, 0.55);

  /* ---- Legacy aliases (do not use in new code) ---- */
  --neon-green:    var(--accent-green);
  --electric-blue: var(--accent-blue);
  --hot-pink:      var(--accent-pink);
  --purple:        var(--accent-violet);
  --orange:        var(--accent-orange);
  --yellow:        var(--accent-yellow);
  --dark:          var(--bg);
  --dark2:         var(--bg-2);
  --dark3:         var(--surface-2);
  --card:          var(--surface);
  --bg-secondary:  var(--bg-2);
}

/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg:            #F8FAFC;
  --bg-2:          #F1F5F9;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;
  --surface-hover: #E2E8F0;
  --border:        rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);

  /* Text */
  --text:          #0F172A;
  --text-muted:    #475569;
  --text-faint:    #94A3B8;
  --text-on-accent:#FFFFFF;

  /* Semantic */
  --primary:       #2563EB;
  --primary-hover: #1D4ED8;
  --success:       #15803D;
  --error:         #DC2626;
  --warn:          #B45309;
  --info:          #0369A1;

  /* Decorative accents (‑500/‑600 for AA contrast on light) */
  --accent-indigo: #4F46E5;
  --accent-teal:   #0D9488;
  --accent-pink:   #DB2777;
  --accent-orange: #EA580C;
  --accent-violet: #7C3AED;
  --accent-yellow: #CA8A04;
  --accent-green:  #16A34A;
  --accent-blue:   #0284C7;

  /* Ambient background */
  --ambient-1:     rgba(99, 102, 241, 0.10);
  --ambient-2:     rgba(56, 189, 248, 0.10);
  --ambient-3:     rgba(34, 197, 94, 0.06);
  --ambient-photo-opacity: 0.08;
  --grid-line:     rgba(15, 23, 42, 0.04);

  /* Focus */
  --focus-color:   var(--primary);

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 6px 18px rgba(15, 23, 42, 0.10);
  --shadow-lg:  0 18px 40px rgba(15, 23, 42, 0.14);
  --shadow-xl:  0 30px 60px rgba(15, 23, 42, 0.18);
}

/* ------------------------------------------------------------
   THEME-INDEPENDENT TOKENS
   ------------------------------------------------------------ */
:root {
  /* User-adjustable UI scale (A− / A+ control). 1 = 100%. */
  --ui-scale: 1;

  /* Typography */
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --font-mono:    'Courier New', ui-monospace, monospace;

  /* Radii */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 50px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
}