/* Design tokens — Polaris naming convention (--p-*) mapped to the party theme.
   One deliberate dark "stage" theme everywhere (big screen lives in a dark room;
   phones follow for consistency and battery). See AGENTS.md → Design language. */

:root {
  /* Color — backgrounds */
  --p-color-bg: #0e1018;
  --p-color-bg-surface: #191d2c;
  --p-color-bg-surface-secondary: #232941;
  --p-color-bg-surface-hover: #2a3150;
  --p-color-bg-surface-active: #323a5e;
  --p-color-bg-inverse: #f4f6ff;

  /* Color — brand & tones */
  --p-color-bg-fill-brand: #7c5cff;
  --p-color-bg-fill-brand-hover: #8f73ff;
  --p-color-bg-fill-success: #22c55e;
  --p-color-bg-fill-warning: #ffca3a;
  --p-color-bg-fill-critical: #ef4444;
  --p-color-bg-fill-info: #38bdf8;

  /* Color — text */
  --p-color-text: #f4f6ff;
  --p-color-text-secondary: #a9b1d1;
  --p-color-text-disabled: #6b7394;
  --p-color-text-inverse: #12141f;
  --p-color-text-brand-on-bg-fill: #ffffff;
  --p-color-text-success: #4ade80;
  --p-color-text-warning: #fde047;
  --p-color-text-critical: #f87171;

  /* Color — borders */
  --p-color-border: #333b5c;
  --p-color-border-secondary: #262d49;
  --p-color-border-focus: #8fb0ff;
  --p-color-border-critical: #ef4444;

  /* Medal colors (standings) */
  --p-color-gold: #ffd700;
  --p-color-silver: #c8ccd8;
  --p-color-bronze: #cd7f32;

  /* Spacing — 4px base scale */
  --p-space-050: 2px;
  --p-space-100: 4px;
  --p-space-150: 6px;
  --p-space-200: 8px;
  --p-space-300: 12px;
  --p-space-400: 16px;
  --p-space-500: 20px;
  --p-space-600: 24px;
  --p-space-800: 32px;
  --p-space-1000: 40px;
  --p-space-1200: 48px;
  --p-space-1600: 64px;

  /* Typography */
  --p-font-family-display: 'Bungee', 'Arial Black', Impact, system-ui, sans-serif;
  --p-font-family-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --p-font-size-heading-3xl: clamp(2.4rem, 5vw, 4.2rem);
  --p-font-size-heading-2xl: clamp(1.8rem, 3.5vw, 2.8rem);
  --p-font-size-heading-xl: clamp(1.4rem, 2.6vw, 2rem);
  --p-font-size-heading-lg: 1.25rem;
  --p-font-size-heading-md: 1.05rem;
  --p-font-size-body-lg: 1.1rem;
  --p-font-size-body-md: 0.95rem;
  --p-font-size-body-sm: 0.85rem;
  --p-font-size-body-xs: 0.75rem;
  --p-font-weight-regular: 400;
  --p-font-weight-medium: 500;
  --p-font-weight-semibold: 600;
  --p-font-weight-bold: 700;

  /* Radius */
  --p-border-radius-100: 4px;
  --p-border-radius-200: 8px;
  --p-border-radius-300: 12px;
  --p-border-radius-400: 16px;
  --p-border-radius-full: 9999px;

  /* Shadow */
  --p-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.35);
  --p-shadow-200: 0 2px 8px rgba(0, 0, 0, 0.4);
  --p-shadow-300: 0 6px 20px rgba(0, 0, 0, 0.45);
  --p-shadow-glow-brand: 0 0 24px rgba(124, 92, 255, 0.45);

  /* Motion */
  --p-motion-duration-150: 150ms;
  --p-motion-duration-200: 200ms;
  --p-motion-duration-300: 300ms;
  --p-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --p-motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --p-motion-duration-150: 0ms;
    --p-motion-duration-200: 0ms;
    --p-motion-duration-300: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}