/* ── Design tokens ── */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #0b0f12;
  --bg-2:          #0f1418;
  --panel:         #131a1f;
  --panel-2:       #182026;
  --panel-3:       #1d262d;
  --border:        #232c34;
  --border-strong: #2e3942;

  /* Text */
  --fg:      #e8ecf0;
  --fg-2:    #c2c9d1;
  --muted:   #8a939c;
  --muted-2: #5d666e;

  /* Stem colours */
  --vocals: #ef4444;
  --drums:  #f97316;
  --bass:   #eab308;
  --guitar: #22c55e;
  --piano:  #a855f7;
  --other:  #9ca3af;

  /* Accent */
  --accent:   #f4b740;
  --accent-2: #d99a2b;

  /* Legacy compat aliases used by waves.css / player.js */
  --gold:        var(--accent);
  --gold-bright: #f8c054;
  --gold-soft:   rgba(244,183,64,0.16);
  --gold-line:   rgba(244,183,64,0.28);
  --ink:         var(--fg);
  --ink-dim:     var(--fg-2);
  --ink-faint:   var(--muted);
  --line:        var(--border);
  --line-strong: var(--border-strong);
  --glass-line:  var(--border);
  --danger:      #d65a4a;
  --focus-ring:  rgba(236,236,236,0.55);

  /* Typography */
  /* Explicit CJK fallbacks for Japanese/Simplified Chinese (i18n, EN/PL/JA/ZH):
     neither Inter nor JetBrains Mono carries CJK glyphs, so without these the
     browser still substitutes automatically, just to whichever CJK font it
     picks on its own -- naming one keeps weight/x-height consistent with the
     Latin text sitting next to it across platforms, rather than leaving it to
     chance. Never affects EN/PL text: browsers only reach past the first name
     a glyph is missing from. */
  --font-sans: 'Inter', -apple-system, system-ui, 'Hiragino Sans', 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Hiragino Sans', 'Noto Sans JP', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', monospace;

  /* Layout */
  --header-w: 300px;
  /* Width of the studio's left column: the stems/mixer panel, the label cell
     above it, and the footer's blank gutter. One value, so the footer's
     waveform strip stays aligned with the lane waveforms above it. */
  --daw-col-w: 300px;
  --lane-h:   86px;
  --radius:   10px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Motion */
  --t-fast: 80ms;
  --t-base: 120ms;
  --easing: cubic-bezier(0.2,0.8,0.2,1);
  --shadow-panel: 0 4px 24px rgba(0,0,0,0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}