/* ==========================================================================
   iIDEA Design Token System — tokens.css
   Single source of truth for all design decisions.
   Import BEFORE style.css so tokens are available everywhere.
   ========================================================================== */

:root {

  /* ── Color Palette: Raw Values ───────────────────────────────────────── */
  --color-blue-50:  #eff3ff;
  --color-blue-100: #dbe4ff;
  --color-blue-200: #bac8ff;
  --color-blue-300: #91a7ff;
  --color-blue-400: #748ffc;
  --color-blue-500: #5c7cfa;
  --color-blue-600: #4361ee;   /* primary brand */
  --color-blue-700: #3451c7;
  --color-blue-800: #2a3fa0;
  --color-blue-900: #1e2e7a;

  --color-purple-400: #9c4dcc;
  --color-purple-500: #7209b7;  /* secondary brand */
  --color-purple-600: #5a0899;

  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;

  --color-red-400:   #f87171;
  --color-red-500:   #ef4444;
  --color-red-600:   #dc2626;

  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;

  --color-cyan-400:  #22d3ee;
  --color-cyan-neon: #00ffcc;   /* game-mode primary */
  --color-pink-neon: #ff00ff;   /* game-mode secondary */

  /* ── Semantic Color Tokens ───────────────────────────────────────────── */
  /* Light mode (default) */
  --token-bg-base:      var(--color-slate-50);   /* page canvas */
  --token-bg-surface:   #ffffff;                  /* card / panel */
  --token-bg-raised:    var(--color-slate-100);   /* input / chip */
  --token-bg-overlay:   rgba(255,255,255,0.92);   /* frosted panel */

  --token-accent:       var(--color-blue-600);
  --token-accent-hover: var(--color-blue-700);
  --token-accent-dim:   rgba(67,97,238,0.10);
  --token-accent-mid:   rgba(67,97,238,0.40);
  --token-accent-glow:  rgba(67,97,238,0.28);
  --token-accent-rgb:   67, 97, 238;

  --token-secondary:    var(--color-purple-500);
  --token-secondary-rgb:114, 9, 183;

  --token-text-primary: var(--color-slate-900);   /* #0f172a */
  --token-text-body:    var(--color-slate-700);   /* #334155 — WCAG AA on white */
  --token-text-muted:   var(--color-slate-500);   /* #64748b */
  --token-text-faint:   var(--color-slate-400);   /* #94a3b8 */
  --token-text-inverse: #ffffff;

  --token-border-subtle: rgba(15,23,42,0.08);
  --token-border-base:   rgba(15,23,42,0.14);
  --token-border-strong: rgba(15,23,42,0.22);

  --token-success:      var(--color-green-500);
  --token-success-dim:  rgba(34,197,94,0.10);
  --token-error:        var(--color-red-500);
  --token-error-dim:    rgba(239,68,68,0.10);
  --token-warning:      var(--color-amber-500);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --token-font-display: 'Orbitron', sans-serif;
  --token-font-ui:      'Rajdhani', sans-serif;
  --token-font-mono:    'Courier New', Courier, monospace;

  /* Type scale (fluid clamp) */
  --token-text-xs:   clamp(0.625rem, 0.58rem + 0.22vw, 0.75rem);
  --token-text-sm:   clamp(0.75rem,  0.70rem + 0.27vw, 0.875rem);
  --token-text-base: clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --token-text-lg:   clamp(1rem,     0.93rem + 0.36vw, 1.125rem);
  --token-text-xl:   clamp(1.125rem, 1.0rem  + 0.63vw, 1.375rem);
  --token-text-2xl:  clamp(1.375rem, 1.2rem  + 0.88vw, 1.75rem);
  --token-text-3xl:  clamp(1.75rem,  1.5rem  + 1.25vw, 2.25rem);
  --token-text-4xl:  clamp(2.25rem,  1.875rem + 1.88vw, 3rem);
  --token-text-5xl:  clamp(3rem,     2.5rem  + 2.5vw,  4rem);
  --token-text-6xl:  clamp(4rem,     3rem    + 5vw,    6rem);

  --token-leading-tight:   1.15;
  --token-leading-snug:    1.35;
  --token-leading-normal:  1.55;
  --token-leading-relaxed: 1.75;

  --token-tracking-tight:  -0.02em;
  --token-tracking-normal: 0;
  --token-tracking-wide:   0.06em;
  --token-tracking-wider:  0.12em;
  --token-tracking-widest: 0.22em;

  /* ── Spacing Scale ───────────────────────────────────────────────────── */
  --token-space-1:   4px;
  --token-space-2:   8px;
  --token-space-3:   12px;
  --token-space-4:   16px;
  --token-space-5:   20px;
  --token-space-6:   24px;
  --token-space-8:   32px;
  --token-space-10:  40px;
  --token-space-12:  48px;
  --token-space-16:  64px;
  --token-space-20:  80px;
  --token-space-24:  96px;
  --token-space-32:  128px;

  /* Fluid section padding */
  --token-section-py: clamp(64px, 8vw, 120px);
  --token-section-px: clamp(20px, 5vw, 80px);

  /* ── Border Radius ───────────────────────────────────────────────────── */
  --token-radius-xs:   2px;
  --token-radius-sm:   4px;
  --token-radius-md:   8px;
  --token-radius-lg:   12px;
  --token-radius-xl:   16px;
  --token-radius-2xl:  24px;
  --token-radius-3xl:  32px;
  --token-radius-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --token-shadow-xs:  0 1px 2px rgba(15,23,42,0.05);
  --token-shadow-sm:  0 2px 8px rgba(15,23,42,0.07);
  --token-shadow-md:  0 8px 24px rgba(15,23,42,0.09);
  --token-shadow-lg:  0 20px 48px rgba(15,23,42,0.10);
  --token-shadow-xl:  0 32px 80px rgba(15,23,42,0.12);
  --token-shadow-accent: 0 8px 32px rgba(67,97,238,0.25);
  --token-shadow-glow:   0 0 20px rgba(67,97,238,0.35);

  /* ── Motion & Easing ─────────────────────────────────────────────────── */
  --token-ease-out:     cubic-bezier(0.0,  0.0, 0.2, 1.0);
  --token-ease-in:      cubic-bezier(0.4,  0.0, 1.0, 1.0);
  --token-ease-inout:   cubic-bezier(0.4,  0.0, 0.2, 1.0);
  --token-ease-spring:  cubic-bezier(0.22, 1.0, 0.36, 1.0);
  --token-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1.0);
  --token-ease-snappy:  cubic-bezier(0.16, 1.0, 0.3,  1.0);

  --token-duration-instant: 80ms;
  --token-duration-fast:    150ms;
  --token-duration-base:    250ms;
  --token-duration-slow:    400ms;
  --token-duration-slower:  600ms;
  --token-duration-crawl:   900ms;

  /* ── Z-Index Scale ───────────────────────────────────────────────────── */
  --token-z-base:     0;
  --token-z-raised:   10;
  --token-z-dropdown: 100;
  --token-z-sticky:   200;
  --token-z-overlay:  1000;
  --token-z-modal:    2000;
  --token-z-toast:    3000;
  --token-z-loader:   99999;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --token-container-sm:  640px;
  --token-container-md:  768px;
  --token-container-lg:  1024px;
  --token-container-xl:  1280px;
  --token-container-2xl: 1440px;
  --token-container-px:  clamp(20px, 5vw, 80px);

  /* ── Component Tokens ────────────────────────────────────────────────── */
  /* Button */
  --token-btn-height-sm:  36px;
  --token-btn-height-md:  44px;
  --token-btn-height-lg:  52px;
  --token-btn-px-sm:      16px;
  --token-btn-px-md:      24px;
  --token-btn-px-lg:      32px;
  --token-btn-radius:     var(--token-radius-sm);
  --token-btn-font:       var(--token-font-display);
  --token-btn-tracking:   var(--token-tracking-wider);

  /* Card */
  --token-card-radius:    var(--token-radius-xl);
  --token-card-padding:   clamp(20px, 3vw, 32px);
  --token-card-shadow:    var(--token-shadow-md);
  --token-card-border:    1px solid var(--token-border-subtle);
  --token-card-bg:        var(--token-bg-surface);

  /* Form */
  --token-input-height:   48px;
  --token-input-radius:   var(--token-radius-md);
  --token-input-border:   1.5px solid var(--token-border-base);
  --token-input-bg:       var(--token-bg-raised);
  --token-input-focus:    var(--token-accent);

  /* Nav */
  --token-nav-height:     72px;
  --token-nav-height-sm:  56px;
  --token-nav-bg-scroll:  rgba(255,255,255,0.88);
  --token-nav-blur:       12px;

  /* Badge / chip */
  --token-chip-radius:    var(--token-radius-pill);
  --token-chip-px:        12px;
  --token-chip-py:        4px;
  --token-chip-font-size: var(--token-text-xs);
  --token-chip-tracking:  var(--token-tracking-wider);
}

/* ── Game Mode Token Overrides ───────────────────────────────────────── */
body.game-mode {
  --token-bg-base:     #050510;
  --token-bg-surface:  #0c0c14;
  --token-bg-raised:   #141420;
  --token-bg-overlay:  rgba(5,5,16,0.90);

  --token-accent:      var(--color-cyan-neon);
  --token-accent-hover:#00ccaa;
  --token-accent-dim:  rgba(0,255,204,0.10);
  --token-accent-mid:  rgba(0,255,204,0.40);
  --token-accent-glow: rgba(0,255,204,0.35);
  --token-accent-rgb:  0, 255, 204;

  --token-secondary:    var(--color-pink-neon);
  --token-secondary-rgb:255, 0, 255;

  --token-text-primary: #e6edf8;
  --token-text-body:    #b8c4d8;
  --token-text-muted:   #8892b0;
  --token-text-faint:   #5a6380;
  --token-text-inverse: #050510;

  --token-border-subtle: rgba(255,255,255,0.06);
  --token-border-base:   rgba(255,255,255,0.12);
  --token-border-strong: rgba(255,255,255,0.20);

  --token-shadow-md:     0 8px 24px rgba(0,0,0,0.45);
  --token-shadow-lg:     0 20px 48px rgba(0,0,0,0.60);
  --token-shadow-accent: 0 8px 32px rgba(0,255,204,0.20);
  --token-shadow-glow:   0 0 20px rgba(0,255,204,0.40);

  --token-nav-bg-scroll:  rgba(5,5,16,0.88);
}