/* Chord Detector Design System — v1.0. Semantic tokens are the integration API. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --canvas: #f8faff;
  --canvas-secondary: #f2f6ff;
  --surface: #ffffff;
  --surface-2: #f6f8fd;
  --surface-hover: #f0f5ff;
  --surface-elevated: #ffffff;
  --ink: #111d36;
  --ink-secondary: #53627c;
  --ink-tertiary: #8390a8;
  --stroke: #e1e8f4;
  --stroke-strong: #cfdaf0;
  --accent: #1769ff;
  --accent-hover: #0759ed;
  --accent-on: #ffffff;
  --accent-soft: #eaf1ff;
  --accent-rgb: 23, 105, 255;
  --accent-alt: #7069f8;
  --wave-start: #2c86ff;
  --wave-end: #6a8cff;
  --wave-inactive: #d4ddec;
  --positive: #15976f;
  --positive-soft: #e7faf1;
  --warning: #ae6e10;
  --warning-soft: #fff5e5;
  --danger: #c43c59;
  --danger-soft: #fff0f4;
  --header-bg: rgba(255,255,255,.82);
  --glow-one: rgba(68,127,255,.14);
  --glow-two: rgba(126,170,255,.09);
  --shadow-sm: 0 5px 16px rgba(23, 55, 114, .045);
  --shadow-md: 0 16px 40px rgba(27, 56, 107, .085);
  --shadow-lg: 0 30px 90px rgba(25, 49, 98, .12);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --container: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --ease: cubic-bezier(.22,.7,.2,1);
  --motion-fast: 150ms;
  --motion-med: 240ms;
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #080d18;
  --canvas-secondary: #0c1323;
  --surface: #101929;
  --surface-2: #151f33;
  --surface-hover: #1a2944;
  --surface-elevated: #19243a;
  --ink: #f5f8ff;
  --ink-secondary: #adbad1;
  --ink-tertiary: #70829f;
  --stroke: #263349;
  --stroke-strong: #34445d;
  --accent: #895aff;
  --accent-hover: #a078ff;
  --accent-on: #ffffff;
  --accent-soft: #2a214f;
  --accent-rgb: 137, 90, 255;
  --accent-alt: #3e83ff;
  --wave-start: #6f89ff;
  --wave-end: #a46aff;
  --wave-inactive: #35445e;
  --positive: #61d9ae;
  --positive-soft: #153e36;
  --warning: #ffd48b;
  --warning-soft: #3a2c20;
  --danger: #ff8397;
  --danger-soft: #411f33;
  --header-bg: rgba(8,13,24,.84);
  --glow-one: rgba(121,55,226,.20);
  --glow-two: rgba(15,79,183,.13);
  --shadow-sm: 0 5px 16px rgba(0,0,0,.12);
  --shadow-md: 0 16px 40px rgba(0,0,0,.20);
  --shadow-lg: 0 30px 90px rgba(0,0,0,.35);
}