/* Design tokens (baseline). Owned by the Design agent.
   Values may be refined and new tokens may be ADDED, but the names below are a
   contract used by every stylesheet and must not be renamed or removed. */

:root {
  /* Surfaces */
  --c-bg-0: #03040b; /* deepest background */
  --c-bg-1: #080a1a;
  --c-bg-2: #10132b; /* panels, cards */
  --c-bg-3: #1b2048; /* raised / hover */
  --c-line: #323a78; /* subtle borders */

  /* Text */
  --c-text: #eaf6ff;
  --c-text-dim: #9ba6d1;
  --c-text-mute: #7882b0;

  /* Neon accents (must match PLAYER_COLORS in src/core/constants.js) */
  --c-cyan: #00e5ff;
  --c-magenta: #ff2bd6;
  --c-lime: #a6ff00;
  --c-orange: #ff8a00;
  --c-violet: #9d5cff;
  --c-yellow: #ffe600;
  --c-red: #ff3355;
  --c-white-hot: #ffffff;

  --c-primary: var(--c-cyan); /* local player / main actions */
  --c-secondary: var(--c-magenta); /* opponent / secondary accents */
  --c-success: var(--c-lime);
  --c-danger: var(--c-red);

  /* Glows (box-shadow / text-shadow values) */
  --glow-primary: 0 0 6px rgba(0, 229, 255, 0.9), 0 0 18px rgba(0, 229, 255, 0.55), 0 0 42px rgba(0, 229, 255, 0.28);
  --glow-secondary: 0 0 6px rgba(255, 43, 214, 0.9), 0 0 18px rgba(255, 43, 214, 0.55), 0 0 42px rgba(255, 43, 214, 0.28);
  --glow-soft: 0 0 24px rgba(0, 229, 255, 0.18);

  /* ---- Additions (Design agent) ---- */
  /* Extra accent glows (work as box-shadow and text-shadow) */
  --glow-lime: 0 0 6px rgba(166, 255, 0, 0.85), 0 0 18px rgba(166, 255, 0, 0.5), 0 0 42px rgba(166, 255, 0, 0.24);
  --glow-orange: 0 0 6px rgba(255, 138, 0, 0.9), 0 0 18px rgba(255, 138, 0, 0.5), 0 0 42px rgba(255, 138, 0, 0.26);
  --glow-violet: 0 0 6px rgba(157, 92, 255, 0.9), 0 0 18px rgba(157, 92, 255, 0.55), 0 0 42px rgba(157, 92, 255, 0.28);
  --glow-danger: 0 0 6px rgba(255, 51, 85, 0.9), 0 0 18px rgba(255, 51, 85, 0.5), 0 0 42px rgba(255, 51, 85, 0.26);
  --glow-white: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.5), 0 0 34px rgba(0, 229, 255, 0.35);
  /* Tight variants for small text and thin lines */
  --glow-primary-tight: 0 0 3px rgba(0, 229, 255, 0.95), 0 0 10px rgba(0, 229, 255, 0.5);
  --glow-secondary-tight: 0 0 3px rgba(255, 43, 214, 0.95), 0 0 10px rgba(255, 43, 214, 0.5);
  /* Inner glow for panels and inputs (box-shadow only) */
  --glow-inset: inset 0 0 18px rgba(0, 229, 255, 0.12), inset 0 0 1px rgba(0, 229, 255, 0.6);
  /* Title: cyan + magenta halo in one shadow stack */
  --glow-title: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 14px rgba(0, 229, 255, 0.75), 0 0 38px rgba(0, 229, 255, 0.4), 0 0 80px rgba(157, 92, 255, 0.3);

  /* Glow colour channels (for rgba()/color-mix) */
  --rgb-cyan: 0, 229, 255;
  --rgb-magenta: 255, 43, 214;
  --rgb-violet: 157, 92, 255;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #00e5ff 0%, #4d8dff 55%, #9d5cff 100%);
  --grad-versus: linear-gradient(90deg, #00e5ff 0%, #9d5cff 50%, #ff2bd6 100%);
  --grad-panel: linear-gradient(180deg, rgba(27, 32, 72, 0.78) 0%, rgba(16, 19, 43, 0.9) 100%);
  --grad-space: radial-gradient(ellipse at 50% 0%, #161a44 0%, #080a1a 55%, #03040b 100%);

  /* Glass panels / overlays */
  --c-panel: rgba(16, 19, 43, 0.82);
  --c-scrim: rgba(3, 4, 11, 0.72);
  --c-line-glow: rgba(0, 229, 255, 0.35);
  --c-focus: #ffffff;
  --focus-ring: 0 0 0 2px var(--c-bg-0), 0 0 0 4px var(--c-focus), 0 0 16px 4px rgba(0, 229, 255, 0.6);

  /* Text colour on neon fills (cyan/lime/yellow buttons etc.): 6:1 or better */
  --c-on-neon: #04060f;

  /* Display type styling */
  --ls-display: 0.14em; /* letter-spacing for uppercase display text */
  --ls-wordmark: 0.22em;
  --fw-display: 700;
  --fw-body: 400;
  --fw-body-strong: 600;

  /* Typography. The display font (Oxanium) covers Latin + Latin-Ext only; every other script falls
     back to the system fonts listed after it, so never rely on one font file. */
  --font-display: 'Oxanium', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --font-body: 'Exo 2', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);

  /* Spacing, radius */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 480ms;

  /* Layers */
  --z-canvas: 0;
  --z-hud: 10;
  --z-screen: 20;
  --z-overlay: 30;
  --z-toast: 40;
}