/**
 * Design tokens for the Pop&Bang showcase site.
 *
 * Mirrors packages/design-tokens/tokens.json (dark mode semantic values —
 * the site only ships dark mode, the app's default and the one that best
 * expresses the neon/underground identity, per docs/02-art-direction.md
 * section 3). Values are copied, not computed, because this static site
 * has no build step wired to the tokens package — if tokens.json changes,
 * update this file by hand and note it in docs/STATE.md.
 */

:root {
  /* Primitives */
  --color-bang-orange: #FF4D2E;
  --color-pop-violet: #9146FF;
  --color-void-black: #2C2C44;
  --color-ink-black: #1C1C2C;
  --color-chalk-white: #F5F3F7;
  --color-graphite: #4D4667;
  --color-steel: #655C80;
  --color-fog: #BFBDC7;
  --color-off-white: #FCFBFD;
  --color-xp-green: #34D399;
  --color-level-gold: #FFC845;
  --color-alert-crimson: #FF3B5C;
  --color-signal-cyan: #22D3EE;

  --color-rarity-common: #8B8896;
  --color-rarity-uncommon: #4ADE80;
  --color-rarity-rare: #3B82F6;
  --color-rarity-epic: #B347FF;
  --color-rarity-legendary: #FFC845;

  --color-event-meet: #FF8A4C;
  --color-event-track: #E63950;
  --color-event-roadtrip: #2DD4BF;
  --color-event-cruise: #A3E635;
  --color-event-expo: #C084FC;
  --color-event-workshop: #38BDF8;

  --color-surface-dark: #3D3857;
  --color-logo-accent-cyan: #4dd9f0;
  --color-logo-accent-magenta: #e05fd6;

  /* Semantic (dark mode) */
  --background: var(--color-void-black);
  --surface: var(--color-surface-dark);
  --surface-elevated: var(--color-graphite);
  --border: var(--color-steel);
  --text-primary: var(--color-chalk-white);
  --text-secondary: var(--color-fog);
  --action-primary: var(--color-bang-orange);
  --action-secondary: var(--color-signal-cyan);
  --text-on-brand: var(--color-ink-black);
  --nav-background: rgba(44, 44, 68, 0.92);

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

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-glow-primary: 0 0 24px rgba(255, 77, 46, 0.45);
  --shadow-glow-secondary: 0 0 24px rgba(145, 70, 255, 0.45);
  --shadow-glow-gold: 0 0 24px rgba(255, 200, 69, 0.45);
  --shadow-glow-epic: 0 0 24px rgba(179, 71, 255, 0.45);
  --shadow-glow-cyan: 0 0 18px rgba(34, 211, 238, 0.35);

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-gaming: 'Chakra Petch', system-ui, sans-serif;
  --font-pixel: 'Press Start 2P', monospace;

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-celebratory: 800ms;
  --duration-ambient: 2000ms;
  --duration-glow-pulse: 1500ms;

  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-overshoot: cubic-bezier(0.2, 0.9, 0.3, 1.2);

  /* Opacity */
  --opacity-disabled: 0.4;
  --opacity-hover-overlay: 0.08;
  --opacity-pressed-overlay: 0.16;
  --opacity-glass: 0.6;
}