/* CSS Custom Properties / Design Tokens */
:root {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --text-primary: #fafafa;
  --text-secondary: #b4b4bc;
  --text-muted: #8b8b95;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --border: #323238;
  --border-hover: #4a4a52;
  --gradient-1: #3b82f6;
  --gradient-2: #8b5cf6;
  --gradient-3: #06b6d4;
  --pedal-active: #22c55e;
  --lever-active: #f59e0b;
  --string-changed: #22c55e;
  --string-selected: #3b82f6;
  --pro-purple: #a78bfa;
  --pro-purple-dim: rgba(139, 92, 246, 0.3);
  --tone-root: #3b82f6; --tone-root-glow: rgba(59, 130, 246, 0.4);
  --tone-third: #a78bfa; --tone-third-glow: rgba(167, 139, 250, 0.4);
  --tone-fifth: #06b6d4; --tone-fifth-glow: rgba(6, 182, 212, 0.4);
  --tone-seventh: #f59e0b; --tone-seventh-glow: rgba(245, 158, 11, 0.4);
  --tone-ninth: #22c55e; --tone-ninth-glow: rgba(34, 197, 94, 0.4);
  --tone-sixth: #f97316; --tone-sixth-glow: rgba(249, 115, 22, 0.4);
  --tone-eleventh: #8b5cf6; --tone-eleventh-glow: rgba(139, 92, 246, 0.4);
  --tone-extension: #ec4899; --tone-extension-glow: rgba(236, 72, 153, 0.4);
}