:root {
  /* Backgrounds */
  --bg-app: #0d0d0f;
  --bg-panel: #141416;
  --bg-panel-raised: #1a1a1e;
  --bg-track: #18181c;
  --bg-track-hover: #1e1e24;
  --bg-input: #0a0a0c;

  /* Borders */
  --border-subtle: #2a2a30;
  --border-medium: #3a3a42;
  --border-strong: #4a4a54;

  /* Text */
  --text-primary: #e8e8ec;
  --text-secondary: #9898a4;
  --text-muted: #5c5c68;

  /* Accents */
  --accent-play: #4ade80;
  --accent-rec: #ef4444;
  --accent-arm: #ef4444;
  --accent-mute: #f59e0b;
  --accent-playhead: #ff3b3b;
  --accent-selection: #3b82f6;
  --accent-metro: #a78bfa;

  /* Track colors */
  --track-ref-accent: #38bdf8;
  --track-ref-bg: rgba(56, 189, 248, 0.06);
  --track-od1-accent: #f97316;
  --track-od1-bg: rgba(249, 115, 22, 0.06);
  --track-od2-accent: #eab308;
  --track-od2-bg: rgba(234, 179, 8, 0.06);
  --track-od3-accent: #22c55e;
  --track-od3-bg: rgba(34, 197, 94, 0.06);
  --track-od4-accent: #a855f7;
  --track-od4-bg: rgba(168, 85, 247, 0.06);

  /* Transport */
  --transport-height: 56px;
  --tracks-width: 220px;
  --panels-width: 280px;
  --ruler-height: 32px;
  --track-count: 5;
  --track-min-height: 48px;
  --playhead-width: 2px;

  /* Timeline */
  --pixels-per-bar: 160;
  --grid-color-major: rgba(255, 255, 255, 0.08);
  --grid-color-beat: rgba(255, 255, 255, 0.04);
  --grid-color-sub: rgba(255, 255, 255, 0.02);

  /* Typography */
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-smooth: 200ms ease;
}