:root {
  /* Background */
  --color-bg: #0d0d0d;
  --color-bg-elevated: #1a1a1a;
  --color-bg-surface: #242424;

  /* Text */
  --color-text: #f0f0f0;
  --color-text-dim: #666;
  --color-text-muted: #999;

  /* Accent */
  --color-accent: #4ecdc4;
  --color-accent-dim: rgba(78, 205, 196, 0.15);

  /* Tuner feedback */
  --color-in-tune: #4ecdc4;
  --color-close: #ffe66d;
  --color-off: #ff6b6b;

  /* Borders */
  --color-border: #333;
  --color-border-subtle: #1f1f1f;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --font-size-xs: clamp(0.625rem, 1.5vw, 0.75rem);
  --font-size-sm: clamp(0.75rem, 2vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
  --font-size-lg: clamp(1rem, 3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 4vw, 1.75rem);
  --font-size-note: clamp(4rem, 15vw, 8rem);
  --font-size-octave: clamp(1.5rem, 5vw, 2.5rem);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 100ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* Z-index layers */
  --z-base: 0;
  --z-elevated: 10;
  --z-overlay: 100;
  --z-toast: 1000;
}