/* Design tokens and cascade-layer order. Loaded first; every other stylesheet
   wraps its rules in one of these layers (see SPEC.md → "CSS"). */
@layer reset, base, shell, components, views, player, modes, overrides;

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #03050b;
  --bg-1: #070b16;
  --bg-2: #0b1222;
  --bg-3: #111a2e;
  --surface: rgb(9 14 30 / 0.62);
  --surface-strong: rgb(11 17 35 / 0.88);
  --surface-hover: rgb(255 255 255 / 0.06);
  --surface-active: rgb(255 255 255 / 0.1);
  --border: rgb(150 200 255 / 0.14);
  --border-strong: rgb(150 200 255 / 0.28);
  --scrim: rgb(2 4 10 / 0.62);

  /* Text */
  --text: #e8f1ff;
  --text-dim: #a3b3cf;
  --text-mute: #6b7a96;
  --text-invert: #03050b;

  /* Accents (overridden per theme below) */
  --accent: #00e5ff;
  --accent-2: #8b5cf6;
  --accent-3: #ff2fd6;
  --accent-ink: #021318;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 55%, transparent);
  --gradient-accent: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--accent-3));

  /* Status */
  --ok: #2bff9a;
  --warn: #ffcc3d;
  --danger: #ff4d6d;
  --info: #5cc8ff;

  /* Typography */
  --font-display: 'Chakra Petch', 'Exo 2', system-ui, sans-serif;
  --font-body: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --lh-tight: 1.15;
  --lh: 1.5;
  --tracking-wide: 0.08em;

  /* Space and shape */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --cut: 14px; /* HUD corner-cut size used with clip-path */
  --blur: 18px;
  --shadow-1: 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-2: 0 18px 60px rgb(0 0 0 / 0.55);
  --glow-1: 0 0 0 1px var(--border), 0 0 24px -6px var(--accent-glow);
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 800ms;

  /* Layout */
  --rail-w: 84px;
  --header-h: 64px;
  --panel-w: clamp(360px, 32vw, 520px);
  --player-h: 92px;
  --tabbar-h: 64px;
  --mini-player-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Stacking */
  --z-scene: 0;
  --z-app: 10;
  --z-hud: 15;
  --z-panel: 20;
  --z-player: 30;
  --z-tooltip: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-palette: 70;
  --z-toast: 80;
  --z-car: 90;
  --z-ambient: 95;
  --z-splash: 100;
}

/* Theme palettes — keep in sync with js/core/theme.js */
:root[data-theme='magenta'] {
  --accent: #ff3ec8;
  --accent-2: #7c5cff;
  --accent-3: #ffb347;
  --accent-ink: #1a0314;
}

:root[data-theme='amber'] {
  --accent: #ffb000;
  --accent-2: #ff5c39;
  --accent-3: #ffe27a;
  --accent-ink: #1a1100;
}

:root[data-theme='lime'] {
  --accent: #39ff88;
  --accent-2: #00d1ff;
  --accent-3: #c6ff3d;
  --accent-ink: #021a0c;
}

:root[data-theme='ice'] {
  --accent: #a8e1ff;
  --accent-2: #6f8cff;
  --accent-3: #ffffff;
  --accent-ink: #06121c;
}

/* Reduced motion: from the OS or from settings.reduceMotion (main.js sets
   data-reduce-motion on <html>). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}

:root[data-reduce-motion] {
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
  --dur-4: 0ms;
}

/* View transitions animate only the routed panel (#view); the WebGL canvas
   keeps rendering instead of being frozen in a root snapshot. Style the
   animation with ::view-transition-old(view) / ::view-transition-new(view). */
:root {
  view-transition-name: none;
}

#view {
  view-transition-name: view;
}