/* Edge themes: dark grounds whose colour lives in gradient borders, glows and highlights.
   Each theme sets only its tokens; the shared rules below draw a gradient border by
   painting the element's fill over the padding box and the gradient under the border. */
:root[data-theme=synthwave]{--bg:#0c0916;--panel:#140e22;--line:#3a2a5a;--text:#f6ecff;--muted:#bca9dc;--mint:#ff6ad5;--peach:#ffb86b;
  --edge:linear-gradient(120deg,#ff2fb9,#a64dff 50%,#2fe2ff);--edge-soft:linear-gradient(120deg,#ff2fb966,#a64dff55 50%,#2fe2ff66);
  --button:linear-gradient(115deg,#ff2fb9,#ff9e3d);--on-button:#1a0617;
  --glow:#ff2fb9;--fill:#140e22;--fill-hi:#26153d;--ground:#0a0714;--horizon:#ff2fb933;--dots:#c58cff2e}
:root[data-theme=crimson]{--bg:#060404;--panel:#0f0808;--line:#3a1416;--text:#f5e9e9;--muted:#bf9a9c;--mint:#ff3b4a;--peach:#ff8a6b;
  --edge:linear-gradient(120deg,#ff1e2d,#7a0010 55%,#ff5a3c);--edge-soft:linear-gradient(120deg,#ff1e2d66,#7a001066 55%,#ff5a3c55);
  --button:linear-gradient(115deg,#8f0016,#e0112a);--on-button:#fff1f1;
  --glow:#ff1e2d;--fill:#100808;--fill-hi:#2a0b0e;--ground:#050303;--horizon:#ff1e2d26;--dots:#ff505a26}
:root[data-theme=toxic]{--bg:#050805;--panel:#0b110b;--line:#1f3a17;--text:#eef8e4;--muted:#a5bb98;--mint:#b6ff1f;--peach:#e8ff3a;
  --edge:linear-gradient(120deg,#b6ff1f,#14d96b 50%,#e8ff3a);--edge-soft:linear-gradient(120deg,#b6ff1f55,#14d96b55 50%,#e8ff3a55);
  --button:linear-gradient(115deg,#b6ff1f,#3dff8c);--on-button:#071207;
  --glow:#7dff3a;--fill:#0a100a;--fill-hi:#132613;--ground:#040704;--horizon:#7dff3a1f;--dots:#b6ff1f24}
:root[data-theme=ice]{--bg:#070d14;--panel:#0d1621;--line:#1e3348;--text:#eef8ff;--muted:#9db3c6;--mint:#7fe0ff;--peach:#c9d8ff;
  --edge:linear-gradient(120deg,#e8fbff,#5fd4ff 45%,#3a6dff);--edge-soft:linear-gradient(120deg,#e8fbff55,#5fd4ff55 45%,#3a6dff66);
  --button:linear-gradient(115deg,#e8fbff,#7fe0ff);--on-button:#06131f;
  --glow:#5fd4ff;--fill:#0c1520;--fill-hi:#132a40;--ground:#060b12;--horizon:#5fd4ff1f;--dots:#bdeeff24}

.visual-card[data-value=synthwave] svg{color:#ff5ccf}
.visual-card[data-value=crimson] svg{color:#ff3b4a}
.visual-card[data-value=toxic] svg{color:#b6ff1f}
.visual-card[data-value=ice] svg{color:#9fe8ff}

/* Straight edges: gradient lines. */
[data-edges] :is(.masthead,.library){border-image:var(--edge) 1}
[data-edges] .empty-state button{border-image:var(--edge) 1;color:var(--mint)}
[data-edges] select{color:var(--text);border-image:var(--edge-soft) 1}
[data-edges] select :is(option,optgroup){background:var(--panel)}
[data-edges] :is(.library h1,.visual-heading h2){background:var(--edge);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Rounded edges: soft gradient borders, full gradient and a glow when chosen. */
[data-edges] :is(.instrument,.visual-card,.library-filters,.cabinet-search,.motion-controls,.presets button,.tool-button,.mini-button,.node-recorder,.share-link,.voice-chip,.perform-exit,.pin-button){border-color:transparent;background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--edge-soft) border-box}
[data-edges] .library-packs button:not(.locked){border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--edge-soft) border-box}
[data-edges] :is(.instrument:hover,.visual-card[aria-pressed=true],.library-packs button.active,.tool-button[aria-pressed=true],.voice-chip.selected,.scenes button.filled,.cabinet-search:focus){border-color:transparent;background:linear-gradient(var(--fill-hi),var(--fill-hi)) padding-box,var(--edge) border-box;box-shadow:0 0 16px -6px var(--glow);color:var(--text)}
[data-edges] .visual-card[aria-pressed=true]{color:var(--mint)}
[data-edges] .scenes button.filled{border-style:solid}
[data-edges] :is(.selection,dialog){border-color:transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--edge) border-box;box-shadow:0 0 30px -14px var(--glow)}
[data-edges] dialog::backdrop{background:#000000d0}
[data-edges] .playground{border-color:transparent;background:radial-gradient(ellipse at 50% 115%,var(--horizon),transparent 62%) padding-box,linear-gradient(var(--ground),var(--ground)) padding-box,var(--edge) border-box;box-shadow:0 0 30px -12px var(--glow)}
[data-edges] .playground:after{background-image:radial-gradient(var(--dots) .65px,transparent .65px)}

/* Voices keep their own colours when they play. */
[data-edges] .instrument.active{border-color:color-mix(in srgb,var(--voice-color) 70%,transparent);background:color-mix(in srgb,var(--voice-color) 9%,var(--fill));box-shadow:0 0 14px -5px var(--voice-color)}
[data-edges] .instrument .add{color:var(--muted)}
[data-edges] .instrument.active .add{border-color:var(--line);color:var(--voice-color)}

[data-edges] .library-filters button.active{background:var(--fill-hi);color:var(--text)}
[data-edges] .play-button{background:var(--button);color:var(--on-button);box-shadow:0 0 22px -6px var(--glow)}
[data-edges] .play-button[aria-pressed=true]{background:linear-gradient(var(--fill-hi),var(--fill-hi)) padding-box,var(--edge) border-box;border:1px solid transparent;color:var(--mint);box-shadow:none}
[data-edges] .pin-button[aria-pressed=true]{background:var(--mint);color:var(--bg)}
[data-edges] input[type=range]{background:var(--edge)}
[data-edges] input[type=range]::-webkit-slider-thumb{background:var(--text);border-color:var(--bg);box-shadow:0 0 0 1px var(--mint),0 0 8px var(--glow)}
[data-edges] input[type=range]::-moz-range-thumb{background:var(--text);border-color:var(--bg)}
[data-edges] .input-meter{background:var(--line)}
[data-edges] .input-meter i{background:var(--edge)}

[data-edges] :is(.quiet-button,.library-packs button,.library-filters button,.selection small,.selection button,.node-every,.node-status,.scenes span,.scenes button,.workspace-footer,.empty-voices,.canvas-top,.empty-state .eyebrow,.empty-state p,.welcome-controls dd,.gesture-readout,.instrument-group-heading,.control-deck label>span,.motion-controls label>span,.motion-controls small,.presets span,.canvas-axis){color:var(--muted)}
[data-edges] :is(.control-deck output,.presets button,.tool-button,.mini-button,.perform-exit,.welcome-controls dt){color:var(--text)}
[data-edges] :is(.empty-state .orbit-mark,.empty-state h2 em){color:var(--mint)}
[data-edges] :is(.scenes button,.library-packs button.locked,.selection .node-settings,.voice-chip .chip-settings,.welcome-controls,.help-note){border-color:var(--line)}
[data-edges] .canvas-axis i{background:var(--line)}
[data-edges] .live-indicator i{background:var(--line)}
[data-edges] .live-indicator i.on{background:var(--mint);box-shadow:0 0 8px var(--glow)}
[data-edges] .workspace-footer i{background:var(--mint)}
[data-edges] :is(.instrument-scroll,.active-voices){scrollbar-color:var(--line) transparent}
[data-edges] #toast{background:var(--text);color:var(--bg);box-shadow:0 0 18px -4px var(--glow)}