/* =====================================================================
   Needle · design tokens
   Music streaming. Light is "Daylight"; dark is "After dark".
   --amp is the one accent (play, buttons, links, the progress line).
   --volt is a background with ink on it: what's playing now, the lit lyric line.
   The deck (the player bar) is always ink, in both modes.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f7f6fb;
  --card: #ffffff;
  --well: #ece9f5;
  --line: #dedae8;
  --ink: #121018;
  --ink-2: #37343f;
  --muted: #5c5966;
  --amp: #5f25c9;
  --amp-2: #4b1ca3;
  --on-amp: #ffffff;
  --amp-soft: #ebe3fb;
  --volt: #c6f432;
  --volt-ink: #121018;
  --deck: #121018;
  --focus: #5f25c9;
  --shadow-card: 0 1px 2px rgba(18, 16, 24, 0.05), 0 16px 34px -24px rgba(18, 16, 24, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(18, 16, 24, 0.5);

  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(42px, 5.8vw, 88px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: 21px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- After dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0d0b12;
    --card: #17151d;
    --well: #121017;
    --line: #2a2733;
    --ink: #f1eff6;
    --ink-2: #d1cdd9;
    --muted: #a39fae;
    --amp: #c4a8ff;
    --amp-2: #d7c4ff;
    --on-amp: #1c0b40;
    --amp-soft: #221a35;
    --volt: #a8d82a;
    --volt-ink: #121018;
    --deck: #07060a;
    --focus: #c4a8ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d0b12;
  --card: #17151d;
  --well: #121017;
  --line: #2a2733;
  --ink: #f1eff6;
  --ink-2: #d1cdd9;
  --muted: #a39fae;
  --amp: #c4a8ff;
  --amp-2: #d7c4ff;
  --on-amp: #1c0b40;
  --amp-soft: #221a35;
  --volt: #a8d82a;
  --volt-ink: #121018;
  --deck: #07060a;
  --focus: #c4a8ff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}