/* Design tokens — source of truth: DESIGN.md. Do not use raw colors outside this file. */
:root {
  color-scheme: dark;
  /* Neutrals and surfaces (dark, default) */
  --color-bg: #0b0b14;
  --color-surface-1: #12121d;
  --color-surface-2: #191927;
  --color-surface-3: #232335;
  --color-border: #2c2b42;
  --color-border-strong: #3d3b58;
  --color-text: #f3f2fa;
  --color-text-2: #a9a7bf;
  --color-text-3: #8c8aa1; /* DESIGN #6F6D88, lightened for AA 4.5:1 (see DESIGN.md) */
  --color-wave-low: #5b4bff;
  --color-wave-mid: #3fd0e0;
  --color-wave-high: #f3f2fa;
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-card: none;
  --color-scroll-shade: rgb(0 0 0 / 0.55); /* edge shade of a scrolling panel */

  /* Brand */
  /* AA 4.5:1 (SPEC 3): fills that carry white text are a little deeper than DESIGN's
     #7C6CFF / #FF5F8A / #FF5C5C, and `primary-ink` is the violet used as text. */
  --color-primary: #7162e8;
  --color-primary-hover: #6555da;
  --color-primary-soft: rgb(124 108 255 / 0.16);
  --color-primary-ink: #8f81ff;
  /* Selected table row: the veil alone was faint on the dark rows. */
  --color-row-selected: rgb(124 108 255 / 0.26);
  --color-accent: #ff5f8a;
  --color-accent-fill: #c74a6c;
  --color-danger-fill: #cb4949;
  --gradient-aurora: linear-gradient(135deg, #7162e8 0%, #a44dd5 50%, #c74a6c 100%);
  --color-success: #3ddc97;
  --color-warning: #ffb547;
  --color-danger: #ff5c5c;
  --color-info: #4cc3ff;
  --color-deck-a: #3fd0e0;
  --color-deck-b: #ff7a6b;

  /* Harmonic wheel: A = minor (deep), B = major (light) */
  --color-key-1a: #d15b60;
  --color-key-1b: #ff9d9e;
  --color-key-2a: #cb6620;
  --color-key-2b: #fca676;
  --color-key-3a: #b47900;
  --color-key-3b: #e6b55d;
  --color-key-4a: #8d8d00;
  --color-key-4b: #c2c564;
  --color-key-5a: #4f9b3e;
  --color-key-5b: #94d186;
  --color-key-6a: #00a278;
  --color-key-6b: #61d7b2;
  --color-key-7a: #009faa;
  --color-key-7b: #43d5dc;
  --color-key-8a: #0094ce;
  --color-key-8b: #60ccfc;
  --color-key-9a: #4d84df;
  --color-key-9b: #90bfff;
  --color-key-10a: #8673d9;
  --color-key-10b: #bdb0ff;
  --color-key-11a: #ad65be;
  --color-key-11b: #e0a4ee;
  --color-key-12a: #c65b93;
  --color-key-12b: #f89dc9;
  /* Fixed colours, same in both themes: text on wheel segments and piano keys (DESIGN 5.11-5.12). */
  --color-on-key: #0b0b14;
  --color-piano-white: #f3f2fa;
  --color-piano-black: #15141f;
  /* Key chip text (DESIGN 2.3): the key colour mixed with white in dark mode and with black in
     light, just enough for AA 4.5:1 on its tinted chip. */
  --key-text-mix: 70%;
  --key-text-base: #ffffff;

  /* Energy scale 1-10 (cold to hot) */
  --color-energy-1: #00aee9;
  --color-energy-2: #00b7ce;
  --color-energy-3: #00bbaa;
  --color-energy-4: #18ba81;
  --color-energy-5: #6bb454;
  --color-energy-6: #9aa922;
  --color-energy-7: #be9b00;
  --color-energy-8: #d88b06;
  --color-energy-9: #e87e42;
  --color-energy-10: #ff4d6a;

  /* Cue slots 1-8 */
  --color-cue-1: #4cc3ff;
  --color-cue-2: #3ddc97;
  --color-cue-3: #ff5f8a;
  --color-cue-4: #ffb547;
  --color-cue-5: #9d8cff;
  --color-cue-6: #ff7a3d;
  --color-cue-7: #e0a4ee;
  --color-cue-8: #8a879e;

  /* Stems */
  --color-stem-vocals: #ff8fb1;
  --color-stem-drums: #ffc857;
  --color-stem-bass: #7c6cff;
  --color-stem-other: #3fd0e0;
  --color-stem-instrumental: #a9a7bf;

  /* Typography */
  --font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
  --font-sans: "Instrument Sans Variable", system-ui, sans-serif;
  --font-mono: "Martian Mono Variable", ui-monospace, monospace;
  /* Martian Mono is wide; data reads like a hardware display at 87.5 % width. */
  --font-mono-stretch: 87.5%;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Harmonic wheel segment fills (DESIGN 5.11). In light the pastel tones need a
   * wider spread, or a weak move and an unrelated key read the same. */
  --wheel-compatible: 0.7;
  --wheel-weak: 0.38;
  --wheel-idle: 0.55;
  --wheel-dimmed: 0.25;

  /* Motion */
  --duration-hover: 150ms;
  --duration-panel: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-bg: #f7f6fb;
    --color-surface-1: #ffffff;
    --color-surface-2: #f1f0f7;
    --color-surface-3: #e8e6f1;
    --color-border: #dddae8;
    --color-border-strong: #c7c3d8;
    --color-text: #15141f;
    --color-text-2: #55536a;
    --color-text-3: #67647c;
    --color-wave-low: #4b3be0;
    --color-wave-mid: #0094b0;
    --color-wave-high: #5a5672;
    --shadow-overlay: 0 1px 2px rgba(20, 18, 40, 0.06), 0 8px 24px rgba(20, 18, 40, 0.08);
    --shadow-card: var(--shadow-overlay);
    --color-scroll-shade: rgb(20 18 40 / 0.14);
    --key-text-mix: 50%;
    --key-text-base: #000000;
    --color-primary-ink: #6356cb;
    --color-row-selected: rgb(124 108 255 / 0.16);
    --color-success: #227c55;
    --color-warning: #9d5e00;
    --color-danger: #bd4444;
    --color-info: #0072ac;
    --color-accent: #b84564;
    --wheel-compatible: 0.8;
    --wheel-weak: 0.45;
    --wheel-dimmed: 0.12;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f6fb;
  --color-surface-1: #ffffff;
  --color-surface-2: #f1f0f7;
  --color-surface-3: #e8e6f1;
  --color-border: #dddae8;
  --color-border-strong: #c7c3d8;
  --color-text: #15141f;
  --color-text-2: #55536a;
  --color-text-3: #67647c;
  --color-wave-low: #4b3be0;
  --color-wave-mid: #0094b0;
  --color-wave-high: #5a5672;
  --shadow-overlay: 0 1px 2px rgba(20, 18, 40, 0.06), 0 8px 24px rgba(20, 18, 40, 0.08);
  --shadow-card: var(--shadow-overlay);
  --color-scroll-shade: rgb(20 18 40 / 0.14);
  --key-text-mix: 50%;
  --key-text-base: #000000;
  --color-primary-ink: #6356cb;
  --color-row-selected: rgb(124 108 255 / 0.16);
  --color-success: #227c55;
  --color-warning: #9d5e00;
  --color-danger: #bd4444;
  --color-info: #0072ac;
  --color-accent: #b84564;
  --wheel-compatible: 0.8;
  --wheel-weak: 0.45;
  --wheel-dimmed: 0.12;
}

/* Theme thumbnails in Settings › General (DESIGN 6.13): each one paints its own theme's
   neutrals whatever the app's theme is. */
[data-theme-preview="dark"] {
  --color-bg: #0b0b14;
  --color-surface-1: #12121d;
  --color-surface-2: #191927;
  --color-surface-3: #232335;
  --color-border: #2c2b42;
  --color-text-3: #8c8aa1;
}

[data-theme-preview="light"] {
  --color-bg: #f7f6fb;
  --color-surface-1: #ffffff;
  --color-surface-2: #f1f0f7;
  --color-surface-3: #e8e6f1;
  --color-border: #dddae8;
  --color-text-3: #67647c;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-hover: 0ms;
    --duration-panel: 0ms;
  }
}