/* ============================================================
   DESIGN TOKENS
   Direction: "audiophile hardware at night" — brushed brass
   controls on a near-black chassis, like a well-made amplifier
   or turntable. Warm, restrained, mechanical precision.
   ============================================================ */

:root {
  /* ---- Color: surface ---- */
  --bg: #0b0c0e;
  --bg-elevated: #101215;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.075);
  --surface-hover: rgba(255, 255, 255, 0.065);
  --surface-pressed: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --glass-blur: 20px;
  --glass-blur-soft: 12px;

  /* ---- Color: text ---- */
  --text-primary: rgba(244, 242, 237, 0.96);
  --text-secondary: rgba(244, 242, 237, 0.62);
  --text-tertiary: rgba(244, 242, 237, 0.38);
  --text-on-accent: #14110a;

  /* ---- Color: accent (brushed brass) ---- */
  --accent: #c6a06a;
  --accent-bright: #dcb87f;
  --accent-dim: #8a6f47;
  --accent-wash: rgba(198, 160, 106, 0.14);
  --accent-wash-strong: rgba(198, 160, 106, 0.24);

  /* ---- Color: semantic ---- */
  --danger: #d97a6a;
  --danger-wash: rgba(217, 122, 106, 0.14);
  --success: #8db894;

  /* ---- Color: badges ---- */
  --badge-audio-fg: #a9c9a4;
  --badge-audio-bg: rgba(169, 201, 164, 0.12);
  --badge-video-fg: #c9ad7e;
  --badge-video-bg: rgba(201, 173, 126, 0.12);

  /* ---- Typography ---- */
  --font-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue",
    Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --fs-display: clamp(2.4rem, 5vw, 4.1rem);
  --fs-h1: 1.9rem;
  --fs-h2: 1.35rem;
  --fs-h3: 1.05rem;
  --fs-body: 0.95rem;
  --fs-small: 0.82rem;
  --fs-micro: 0.72rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --ls-tight: -0.02em;
  --ls-wide: 0.08em;
  --ls-wider: 0.14em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px var(--border), 0 8px 30px -10px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --player-h: 84px;
  --player-h-mobile: 64px;
  --bottomnav-h: 60px;
  --header-h: 64px;
  --content-max: 1180px;

  color-scheme: dark;
}

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

/* Manual override, toggled from Settings → Reduce motion,
   independent of the OS-level media query above. */
html.force-reduce-motion {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
}

html.force-reduce-motion .skeleton,
html.force-reduce-motion .eq-bars span,
html.force-reduce-motion .fs-artwork .pulse-ring {
  animation: none !important;
}