/* ============================================================
   ACE TECH ACADEMY — Design Tokens
   Tactical cyberpunk brand system: near-black surfaces,
   electric blue (Ace) + neon green (Pwn) dual-accent identity.
   ============================================================ */

:root {
  /* ---- Fonts ---- */
  --font-display: "Cabinet Grotesk", "Satoshi", sans-serif;
  --font-body: "Satoshi", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  /* ---- Type scale ---- */
  --text-hero: clamp(2.75rem, 6vw, 5.5rem);
  --text-3xl: clamp(2.25rem, 4vw, 3.25rem);
  --text-2xl: clamp(1.75rem, 3vw, 2.25rem);
  --text-xl: clamp(1.375rem, 2vw, 1.625rem);
  --text-lg: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius / borders ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --border-w: 1px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---- Max widths ---- */
  --measure: 66ch;
  --container: 1240px;
}

/* ==================== DARK (default — "Field Ops") ==================== */
:root,
[data-theme="dark"] {
  --bg: #0a0e17;
  --surface: #10161f;
  --surface-2: #141c28;
  --surface-3: #182233;
  --border: #232f42;
  --border-soft: #1a2334;

  --text: #e8edf5;
  --text-muted: #93a1b8;
  --text-faint: #5c6a82;

  --ace: #3ea6ff;
  --ace-hover: #6cc2ff;
  --ace-dim: #1f4a75;
  --ace-glow: rgba(62, 166, 255, 0.35);

  --pwn: #7ef29a;
  --pwn-hover: #a3ffc0;
  --pwn-dim: #1f4a34;
  --pwn-glow: rgba(126, 242, 154, 0.3);

  --error: #ff5c7a;
  --warning: #ffb648;
  --success: #7ef29a;

  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --scrim: rgba(6, 9, 15, 0.72);
}

/* ==================== LIGHT ("Daylight Ops") ==================== */
[data-theme="light"] {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #eceff4;
  --surface-3: #e2e6ee;
  --border: #d6dbe4;
  --border-soft: #e2e6ee;

  --text: #0c1220;
  --text-muted: #4a5670;
  --text-faint: #808da4;

  --ace: #0068d6;
  --ace-hover: #0050a3;
  --ace-dim: #cfe4ff;
  --ace-glow: rgba(0, 104, 214, 0.18);

  --pwn: #178a4c;
  --pwn-hover: #106b3a;
  --pwn-dim: #d3f2df;
  --pwn-glow: rgba(23, 138, 76, 0.16);

  --error: #c62e4d;
  --warning: #a15b0a;
  --success: #178a4c;

  --shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.18);
  --scrim: rgba(243, 245, 248, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}