/* ─── Vocal Practice AI — Design Tokens ──────────────────────────────────────
   Three-layer: Primitive → Semantic → Component
   Dark-only (color-scheme: dark in style.css)
   ──────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Layer 1: Primitives ─────────────────────────────────────── */

  /* Surface (matches existing style.css vars — kept in sync) */
  --prim-surface-0:   #000000;
  --prim-surface-1:   #212121;
  --prim-surface-2:   #292929;
  --prim-surface-3:   #333333;
  --prim-surface-4:   #3d3d3d;

  /* Text */
  --prim-text-100:    #ffffff;
  --prim-text-60:     #999999;
  --prim-text-40:     #666666;

  /* Line / border */
  --prim-line:        rgba(229,231,235,.14);
  --prim-line-strong: rgba(229,231,235,.28);

  /* Blue (primary brand) */
  --prim-blue-300:    #6ab0ff;
  --prim-blue-400:    #3b9eff;
  --prim-blue-500:    #0075ff;   /* ← existing --blue */
  --prim-blue-600:    #005acc;
  --prim-blue-900:    rgba(0,117,255,.12);

  /* Green (pitch correct / success) */
  --prim-green-300:   #86efac;
  --prim-green-400:   #4ade80;
  --prim-green-500:   #22c55e;
  --prim-green-600:   #16a34a;
  --prim-green-900:   rgba(34,197,94,.12);

  /* Amber (pitch close / warning) */
  --prim-amber-300:   #fcd34d;
  --prim-amber-400:   #fbbf24;
  --prim-amber-500:   #f59e0b;
  --prim-amber-600:   #d97706;
  --prim-amber-900:   rgba(245,158,11,.12);

  /* Red (pitch off / error) */
  --prim-red-300:     #fca5a5;
  --prim-red-400:     #f87171;
  --prim-red-500:     #ef4444;
  --prim-red-600:     #dc2626;
  --prim-red-900:     rgba(239,68,68,.12);

  /* Purple (MIDI / harmony) */
  --prim-purple-400:  #c084fc;
  --prim-purple-500:  #a855f7;
  --prim-purple-900:  rgba(168,85,247,.12);

  /* ── Layer 2: Semantic ───────────────────────────────────────── */

  /* Backgrounds */
  --color-bg:         var(--prim-surface-0);
  --color-card:       var(--prim-surface-1);
  --color-raised:     var(--prim-surface-2);
  --color-floating:   var(--prim-surface-3);
  --color-overlay:    var(--prim-surface-4);

  /* Text */
  --color-text:       var(--prim-text-100);
  --color-text-sub:   var(--prim-text-60);
  --color-text-dim:   var(--prim-text-40);

  /* Border */
  --color-border:     var(--prim-line);
  --color-border-strong: var(--prim-line-strong);

  /* Brand */
  --color-primary:    var(--prim-blue-500);
  --color-primary-hover: var(--prim-blue-400);
  --color-primary-bg: var(--prim-blue-900);

  /* Semantic states */
  --color-success:    var(--prim-green-500);
  --color-success-bg: var(--prim-green-900);
  --color-warning:    var(--prim-amber-500);
  --color-warning-bg: var(--prim-amber-900);
  --color-error:      var(--prim-red-500);
  --color-error-bg:   var(--prim-red-900);

  /* ── Layer 3: Component — Pitch / Music ──────────────────────── */

  /* Pitch accuracy indicator (green→amber→red spectrum) */
  --pitch-exact:      var(--prim-green-400);   /* ±5 cents */
  --pitch-close:      var(--prim-amber-400);   /* ±15 cents */
  --pitch-off:        var(--prim-red-400);     /* >15 cents */
  --pitch-cursor:     var(--prim-blue-400);    /* live cursor line */
  --pitch-bg:         var(--prim-surface-1);

  /* Score / sheet music display */
  --score-bg:         #0d0d0d;
  --score-ink:        #e8e8e8;
  --score-select:     var(--prim-blue-900);
  --score-correct:    var(--prim-green-900);
  --score-error:      var(--prim-red-900);

  /* MIDI editor */
  --midi-bg:          var(--prim-surface-1);
  --midi-grid:        var(--prim-line);
  --midi-note:        var(--prim-purple-500);
  --midi-note-select: var(--prim-blue-500);
  --midi-playhead:    var(--prim-blue-400);
  --midi-beat-line:   var(--prim-line-strong);

  /* Waveform / visualizer */
  --wave-voice:       #d8dde5;
  --wave-inactive:    #59616c;
  --wave-pitch-line:  var(--prim-green-400);

  /* Recording states */
  --rec-idle:         var(--prim-surface-2);
  --rec-active:       var(--prim-red-500);
  --rec-active-glow:  var(--prim-red-900);

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans:        Inter, "IBM Plex Sans", Geist, system-ui, sans-serif;
  --font-mono:        "IBM Plex Mono", "Fira Code", ui-monospace, monospace;

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out:         cubic-bezier(.16,1,.3,1);
  --ease-spring:      cubic-bezier(.34,1.56,.64,1);
  --dur-fast:         120ms;
  --dur-base:         200ms;
  --dur-slow:         350ms;

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-pill:      9999px;

}