/* ============================================================================
   Zuzufy design tokens — dark-first, original palette.
   Ink surfaces, ember (coral) primary, ultraviolet secondary, signal-red ON AIR.
   ============================================================================ */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #09090e;
  --bg-elev: #0f0f16;
  --surface: #15151e;
  --surface-2: #1c1c28;
  --surface-3: #252533;
  --glass: rgba(22, 22, 32, 0.72);
  --glass-strong: rgba(14, 14, 21, 0.86);
  --scrim: rgba(5, 5, 9, 0.66);

  /* Lines */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text: #f4f3f8;
  --text-2: #b9b8c6;
  --text-3: #85849a;
  --text-inverse: #0b0b10;

  /* Brand */
  --ember: #ff5a36;
  --ember-2: #ff7a4f;
  --ember-soft: rgba(255, 90, 54, 0.14);
  --violet: #8b6cff;
  --violet-soft: rgba(139, 108, 255, 0.16);
  --mint: #2fd6a3;
  --mint-soft: rgba(47, 214, 163, 0.14);
  --amber: #ffb547;
  --amber-soft: rgba(255, 181, 71, 0.14);
  --onair: #ff2d55;
  --onair-soft: rgba(255, 45, 85, 0.16);
  --danger: #ff4d5e;
  --danger-soft: rgba(255, 77, 94, 0.14);

  --gradient-brand: linear-gradient(135deg, #ff5a36 0%, #ff3d7f 52%, #8b6cff 100%);
  --gradient-ink: linear-gradient(180deg, rgba(9, 9, 14, 0) 0%, #09090e 100%);

  /* Type */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: clamp(2.25rem, 4vw + 1rem, 3.75rem);

  /* Spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Depth */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);
  --glow-ember: 0 8px 28px rgba(255, 90, 54, 0.35);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 420ms;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-condensed: 76px;
  --topbar-h: 64px;
  --player-h: 84px;
  --bottomnav-h: 64px;
  --content-max: 1360px;
  --focus: 0 0 0 3px rgba(139, 108, 255, 0.55);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f9;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f0f6;
  --surface-3: #e6e4ee;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --scrim: rgba(20, 18, 30, 0.38);
  --line: rgba(20, 18, 40, 0.08);
  --line-strong: rgba(20, 18, 40, 0.16);
  --text: #15141c;
  --text-2: #4a4858;
  --text-3: #767487;
  --text-inverse: #ffffff;
  --ember-soft: rgba(255, 90, 54, 0.12);
  --violet-soft: rgba(139, 108, 255, 0.12);
  --gradient-ink: linear-gradient(180deg, rgba(246, 245, 249, 0) 0%, #f6f5f9 100%);
  --shadow-1: 0 1px 2px rgba(20, 18, 40, 0.06), 0 2px 8px rgba(20, 18, 40, 0.06);
  --shadow-2: 0 10px 30px rgba(20, 18, 40, 0.12);
  --shadow-3: 0 24px 64px rgba(20, 18, 40, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}