/* Presentation only. Skins change these tokens, never layout or sound state.
   :root is the classic fallback, including when JavaScript is unavailable. */
:root, [data-skin-preview="classic"] {
  --font-brand: var(--font-display);
  --brand-version: var(--envelope-sustain);
  --font-display: Comfortaa, ui-rounded, system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  color-scheme: light;
  --art-ink: #3d4c45;
  --dial-label-mix: black;
  --page: #eee;
  --page-image: url('../images/ui/background.svg');
  --shell: #eceee9;
  --text: #38433f;
  --text-secondary: #56615e;
  --text-value: #56615e;
  --text-muted: #65706b;
  --heading-ink: #405d57;
  --scope-surface: #e8f0e9;
  --scope-a: #65b7aa;
  --scope-b: #e6bc73;
  --scope-c: #ac92c4;
  --scope-edge: #526b65;
  --ink: #111;
  --outline: #000;
  --focus: #596a9f;
  --arp-highlight: #77638e;
  --panel: #f7f5ed;
  --panel-secondary: #e8ede4;
  --panel-muted: #d8e0d6;
  /* Quiet section colours follow each skin's character palette. */
  --panel-presets: color-mix(in srgb, var(--icon-b) 24%, var(--panel));
  --panel-performance: color-mix(in srgb, var(--icon-a) 28%, var(--panel));
  --panel-instruments: color-mix(in srgb, var(--icon-c) 22%, var(--panel));
  --border: #acb8ac;
  --inset: #cad6cf;
  --panel-radius: 16px;
  --pad-radius: 12px;
  --key-radius: 22%;
  --key-outline: #596b65;
  --button-radius: 7px;
  --control-surface: #faf9f2;
  --control-border: #cbd3cd;
  --control-idle: #aaa;
  --control-shadow: #888;
  --button-border: #98aa9b;
  --select-border: #98aa9b;
  --image-border: #b28c00;
  --wave-border: #e0e2d7;
  --step-border: #bbb;
  --drum-beat-light: #fffdf8;
  --drum-beat-shade: #dfe2dd;
  --drum-step-on: var(--icon-c);
  --drum-hit: var(--icon-b);
  --drum-step-edge: color-mix(in srgb,var(--icon-c) 65%,var(--tool-ink));
  --drum-playhead: color-mix(in srgb,var(--icon-b) 60%,var(--tool-ink));
  --sidebar-border: #ddd;
  --green: #80a879;
  --selected: var(--tool-active);
  --selected-bright: #bfcea5;
  --random: #ad80b0;
  --connection: #b59b80;
  --sound-control: #9d4e59;
  --sound-active: #ed555b;
  --output-control: #496b59;
  --fader-accent: #c75e78;
  --fader-effects: var(--fader-accent);
  --fader-tempo: #647fb7;
  --fader-output: #298b84;
  --fader-pan: #e3be4c;
  --fader-track: #d2dccd;
  --fader-rim: #fffdf4;
  /* Richer tool colours, distinct from the musical note palette. */
  --envelope-attack: #54b6a6;
  --envelope-decay: #e9b45f;
  --envelope-sustain: #729ece;
  --envelope-release: #b18bc8;
  --envelope-neutral: #a6aaa2;
  --tool-surface: #f7f7ef;
  --tool-border: #a3b2a3;
  --tool-active: #cce1d7;
  --tool-ink: #3d4c45;
  --icon-a: #80bdb3;
  --icon-b: #efc279;
  --icon-c: #b4a0d1;
  --icon-paper: #fffbed;
  --icon-record: #df5865;
  --source-on: color-mix(in srgb,var(--icon-c) 36%,var(--icon-paper));
  --source-edge: color-mix(in srgb,var(--icon-c) 58%,var(--tool-ink));
  --source-off: color-mix(in srgb,var(--icon-paper) 75%,var(--envelope-neutral));
  --snake-ink: #27272b;
  --snake-body: #323237;
  --snake-belly: #5b5961;
  --snake-eyelid: #b7b4b2;
  --snake-tongue: var(--icon-record);
  --snake-highlight: #a9a7ad;
  --snake-noise-body: #323237;
  --snake-speckle: #e9e5dc;
  --snake-noise-belly: #76737e;
  --snake-noise-eyelid: #b7b4b2;
  /* Waveform characters share the decorative tool palette. */
  --wave-surface: #f7f5e9;
  --wave-a: var(--icon-a);
  --wave-b: var(--icon-b);
  --wave-c: var(--icon-c);
  --wave-paper: var(--icon-paper);
  --wave-ink: var(--art-ink);
  --wave-line-width: 8;
  --octave-low: #376d9b;
  --octave-button-low: #9db7d0;
  --octave-high: #f8fbff;
  --octave-ink: #294b69;
  --meter-surface: #e3e5f0;
  --meter-fill: #7a85b2;
  --meter-border: #abb2ce;
  --harmonics: #81739d;
  --pad-border: var(--tool-border);
  --loop-ink: #677d70;
  /* Musical graphics stay legible and drawings retain their original paper. */
  --drawing-paper: #e0e0d1;
}

/* Sky retains the existing soft ID for saved appearances. */
:root[data-skin="soft"], [data-skin-preview="soft"] {
  --art-ink: #344b59;
  --page: #d8e7f0;
  --page-image: none;
  --shell: #e7f1f7;
  --text: #24333b;
  --text-secondary: #40545e;
  --text-value: #40545e;
  --text-muted: #536771;
  --heading-ink: #455d70;
  --scope-surface: #e5eff3;
  --scope-a: #75b9bf;
  --scope-b: #e6c184;
  --scope-c: #b39acc;
  --scope-edge: #506976;
  --key-outline: #596d78;
  --panel: #f2f6f8;
  --panel-secondary: #e1eaf0;
  --panel-muted: #cedce5;
  --border: #95acb9;
  --inset: #d2e1eb;
  --panel-radius: 24px;
  --pad-radius: 16px;
  --button-radius: 10px;
  --control-surface: #f7f9fb;
  --control-border: #d1dce2;
  --control-idle: #acbcc5;
  --control-shadow: #95a5ae;
  --button-border: #8fa7b4;
  --select-border: #8fa7b4;
  --image-border: #8fa7b4;
  --wave-border: #e4edf2;
  --step-border: #becdd6;
  --sidebar-border: #e8eff3;
  --green: #51866b;
  --selected: var(--tool-active);
  --selected-bright: #d2ad68;
  --random: #9a70a5;
  --connection: #a18167;
  --meter-surface: #e8eaf3;
  --meter-fill: #8491bc;
  --meter-border: #b0bad3;
  --harmonics: #607d8b;
  --pad-border: #738f9d;
  --loop-ink: #5c7582;
  --tool-surface: #f4f7fa;
  --tool-border: #95acb9;
  --tool-active: #c4d8e3;
  --tool-ink: #344b59;
  --icon-a: #8dc4c6;
  --icon-b: #edc990;
  --icon-c: #bea9d6;
  --fader-accent: #a46a98;
  --fader-output: #438a9b;
  --fader-pan: #d9bd63;
  --fader-track: #cbd8df;
  --fader-rim: #f7f9fb;
  --envelope-attack: #62b9b4;
  --envelope-decay: #e5b970;
  --envelope-sustain: #7ca4cc;
  --envelope-release: #b996cf;
  --envelope-neutral: #a8b3ba;
  --wave-surface: #f1f6f5;
}


/* All skins keep note colours and the volume / pan colour families intact. */
:root[data-skin="white"], [data-skin-preview="white"] {
  --page: #e9eeee;
  --page-image: none;
  --shell: #ffffff;
  --panel: #ffffff;
  --panel-secondary: #f2f5f4;
  --panel-muted: #e2e9e6;
  --inset: #eef2f0;
  --border: #bdc9c5;
  --heading-ink: #465e59;
  --scope-surface: #f4f9f7;
  --scope-a: #60b3a5;
  --scope-b: #dca95b;
  --scope-c: #a188bb;
  --tool-surface: #fcfdfc;
  --tool-border: #b2c2bc;
  --tool-active: #d5e9e2;
  --control-surface: #ffffff;
  --control-border: #d0dbd6;
  --button-border: #afc0b8;
  --select-border: #afc0b8;
  --wave-border: #e2e9e5;
  --wave-surface: #f7faf9;
  --fader-track: #e1e9e5;
  --fader-rim: #ffffff;
  --meter-surface: #eff0f7;
  --icon-a: #8ac3b7;
  --icon-b: #ebc17d;
  --icon-c: #b7a3ce;
}

:root[data-skin="night"], [data-skin-preview="night"] {
  color-scheme: dark;
  --page: #10151c;
  --page-image: none;
  --shell: #19212b;
  --panel: #232d38;
  --panel-secondary: #2c3945;
  --panel-muted: #344453;
  --inset: #202c37;
  --text: #edf1f2;
  --text-secondary: #c6d1d8;
  --text-value: #c6d1d8;
  --text-muted: #b4c3ce;
  --heading-ink: #d0e1dd;
  --border: #506170;
  --focus: #b8c9f3;
  --arp-highlight: #bfa9d6;
  --key-outline: #55616b;
  --scope-surface: #1c2833;
  --scope-a: #7bc7b8;
  --scope-b: #ecc886;
  --scope-c: #c0a6dc;
  --scope-edge: #9faebc;
  --control-surface: #364652;
  --control-border: #607482;
  --control-idle: #82949f;
  --control-shadow: #111820;
  --button-border: #647d89;
  --select-border: #647d89;
  --image-border: #71818f;
  --wave-border: #516675;
  --step-border: #62747e;
  --sidebar-border: #4b5f6a;
  --tool-surface: #2d3c49;
  --tool-border: #647985;
  --tool-active: #41655f;
  --tool-ink: #e0ebe7;
  /* Faces stay dark on their coloured bodies, separate from light UI text. */
  --art-ink: #253743;
  --icon-a: #8bcec0;
  --icon-b: #edc685;
  --icon-c: #bea6da;
  --icon-paper: #fff8e8;
  --icon-record: #ed7887;
  --envelope-attack: #6ccaba;
  --envelope-decay: #ebc078;
  --envelope-sustain: #8db2e0;
  --envelope-release: #c29fdf;
  --envelope-neutral: #82939d;
  --dial-label-mix: white;
  --fader-output: #51b3a6;
  --fader-accent: #df8098;
  --fader-tempo: #91ade5;
  --fader-pan: #e2bd62;
  --fader-track: #425665;
  --fader-rim: #d8e5e3;
  --wave-surface: #73858e;
  --source-on: #b3b6cc;
  --source-off: #8d9ca4;
  --source-edge: #82919c;
  --snake-ink: #b2bec6;
  --snake-body: #333e48;
  --snake-belly: #626d78;
  --snake-highlight: #a7b6c2;
  --snake-noise-body: #303943;
  --snake-noise-belly: #626c78;
  --meter-surface: #2e3a4d;
  --meter-fill: #a5b2e4;
  --meter-border: #647790;
  --harmonics: #aa97c9;
  --drum-beat-light: #354653;
  --drum-beat-shade: #293743;
  --loop-ink: #a6b7c6;
}

:root[data-skin="lilac"], [data-skin-preview="lilac"] {
  --page: #e4deed;
  --page-image: none;
  --shell: #eee8f3;
  --panel: #faf5fa;
  --panel-secondary: #ede4f0;
  --panel-muted: #dcd3e6;
  --inset: #ded5e9;
  --text: #51475d;
  --text-secondary: #64596f;
  --text-value: #64596f;
  --text-muted: #70617b;
  --heading-ink: #695779;
  --border: #bbaec7;
  --focus: #87629f;
  --key-outline: #75627b;
  --scope-surface: #eee7f3;
  --scope-a: #7dbcb1;
  --scope-b: #d9b777;
  --scope-c: #a989c0;
  --scope-edge: #70677d;
  --control-surface: #faf6fc;
  --control-border: #d7cddd;
  --button-border: #b7a5c4;
  --select-border: #b7a5c4;
  --wave-border: #e4dce9;
  --tool-surface: #f8f2f9;
  --tool-border: #b9a9c7;
  --tool-active: #ded0ec;
  --tool-ink: #574963;
  --art-ink: #51435b;
  --icon-a: #91c2b6;
  --icon-b: #e7bd87;
  --icon-c: #b999ce;
  --envelope-attack: #63b7a7;
  --envelope-decay: #e4b374;
  --envelope-sustain: #86a0d2;
  --envelope-release: #b68cce;
  --envelope-neutral: #b3a7ba;
  --fader-output: #488f89;
  --fader-accent: #b9779f;
  --fader-pan: #dfbb65;
  --fader-track: #d8cde0;
  --fader-rim: #fff9fc;
  --meter-surface: #e6e0f0;
  --meter-fill: #9380b5;
  --meter-border: #b7a6c8;
  --wave-surface: #f0e9f5;
  --drum-beat-light: #fdf8ff;
  --drum-beat-shade: #e5dce9;
  --harmonics: #9b7cb0;
  --loop-ink: #847192;
}