/* Sound Designer — screen-scoped token re-cut, verbatim from the app's
   src/styles/tokens.css (founder handoff port). Dark + light. */
.sd-screen {
  /* Surfaces: pure neutral gray */
  --ink-base: oklch(0.14 0 0);
  --canvas-app: oklch(0.13 0 0);
  --dt-void: oklch(0.11 0 0);
  --dt-well: oklch(0.155 0 0);
  --dt-surface: oklch(0.145 0 0);
  --dt-raised: oklch(0.205 0 0);
  --dt-float: oklch(0.245 0 0);
  --dt-overlay: oklch(0.285 0 0);
  --s1: oklch(0.175 0 0);
  --s2: oklch(0.215 0 0);
  --s3: oklch(0.255 0 0);
  --s4: oklch(0.29 0 0);
  --ink-well: oklch(0.185 0 0);
  --ink-well-hover: oklch(0.215 0 0);
  /* Ink ramp + composed recipes, re-cut literally */
  --t1: rgba(255, 255, 255, 0.92);
  --t2: rgba(255, 255, 255, 0.74);
  --t3: rgba(255, 255, 255, 0.5);
  --t4: rgba(255, 255, 255, 0.3);
  --t5: rgba(255, 255, 255, 0.16);
  --label-ink: rgba(255, 255, 255, 0.62);
  --control-inset: oklch(0.185 0 0);
  --control-inset-hover: oklch(0.215 0 0);
  --surface-slab: linear-gradient(to top, oklch(0.215 0 0), oklch(0.175 0 0) 55%);
  --surface-chip: linear-gradient(to top, oklch(0.255 0 0), oklch(0.215 0 0) 55%);
  --surface-chip-hover: linear-gradient(to top, oklch(0.29 0 0), oklch(0.255 0 0) 55%);
  --border-struct-weak: rgba(255, 255, 255, 0.05);
  --border-struct: rgba(255, 255, 255, 0.08);
  --border-struct-strong: rgba(255, 255, 255, 0.12);
  --border-struct-heavy: rgba(255, 255, 255, 0.17);
  --border-struct-bold: rgba(255, 255, 255, 0.24);

  /* Accent — the Library pill's slate blue (the --blue-arc ramp role) */
  --lib-1: #045585;
  --lib-2: #036487;
  --lib-3: #103455;
  --lib-rgb: 3, 100, 135;
  --action-nav: linear-gradient(180deg, var(--lib-1) 0%, var(--lib-2) 55%, var(--lib-3) 100%);
  --accent: #7fb2ff;
  --accent-hi: #a8caff;
  --accent-dim: #045585;
  --accent-rgb: 127, 178, 255;
  --accent-solid: #036487;
  --accent-solid-rgb: 3, 100, 135;
  --action-primary: var(--action-nav);
  --shadow-orb: 0 10px 26px -12px rgba(var(--lib-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* The Song-DNA MOOD tile — the selected-chip treatment */
  --chip-selected: linear-gradient(160deg, rgba(var(--lib-rgb), 0.3), rgba(var(--lib-rgb), 0.09));
  --chip-selected-hover: linear-gradient(160deg, rgba(var(--lib-rgb), 0.4), rgba(var(--lib-rgb), 0.14));
  --chip-selected-edge: rgba(127, 178, 255, 0.42);

  /* Secondary warm accent (the "referencing song" band) */
  --warm: var(--stz-gold-hi);
  --warm-rgb: var(--gold-hi-rgb);

  /* Per-vibe hues — pressing data, not theme (cf. --recp-*) */
  --rose: #c46878;
  --rose-rgb: 196, 104, 120;
  --dusk: #8878b8;
  --dusk-rgb: 136, 120, 184;
  --slate: #5e88aa;
  --slate-rgb: 94, 136, 170;
  --sage: #6e9e78;
  --sage-rgb: 110, 158, 120;
  --copper: #b86848;
  --copper-rgb: 184, 104, 72;
  --sand: #a88e68;
  --sand-rgb: 168, 142, 104;

  /* Composed recipes (channels resolve per theme at the element) */
  --sd-stage-active-bg: linear-gradient(180deg, rgba(var(--accent-rgb), 0.06), var(--dt-raised));
  --sd-stage-line: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent);
  --sd-vibe-bg: linear-gradient(to top, var(--s3), var(--s2) 60%);
  --sd-vibe-halo: radial-gradient(circle, var(--vibe-c, rgba(var(--accent-rgb), 0.35)) 0%, transparent 70%);
  --sd-chip-on-bg: linear-gradient(to top, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.07) 55%);
  --sd-seg-on-bg: linear-gradient(to top, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.09) 55%);
  --sd-slab-edge: oklch(0.215 0 0);
  --sd-actions-fade: linear-gradient(to top, var(--sd-slab-edge) 62%, transparent);
  --sd-chip-on-inset-hi: rgba(255, 255, 255, 0.06);
  --sd-modes-active-shadow: 0 6px 16px -8px rgba(var(--lib-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --sd-vibe-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -16px 30px -20px rgba(0, 0, 0, 0.75);
  --sd-rail-shadow: -24px 0 48px -24px rgba(0, 0, 0, 0.7);
  --sd-sheet-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.8);
  --sd-cta-ink: var(--action-content);

  /* Aurora — the no-WebGL fallback field behind the Grainient */
  --sd-aurora-field:
    radial-gradient(120% 90% at 12% 100%, #1c4977 0%, rgba(11, 21, 41, 0.85) 38%, rgba(20, 20, 21, 0) 72%),
    radial-gradient(100% 70% at 88% 0%, rgba(28, 73, 119, 0.55) 0%, rgba(11, 21, 41, 0.5) 40%, rgba(20, 20, 21, 0) 75%),
    linear-gradient(180deg, #0b1529 0%, #141415 62%, #101011 100%);
  --sd-aurora-vignette: radial-gradient(140% 100% at 50% 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.42) 100%);
}

/* Sound Designer — the handoff's warm-ivory light theme, same slate
   accent re-pitched as ink-on-ivory. */
:root[data-theme='light'] .sd-screen {
  --ink-base: oklch(0.973 0.008 85);
  --canvas-app: oklch(0.968 0 0);
  --dt-void: oklch(0.945 0 0);
  --dt-well: oklch(0.955 0 0);
  --dt-surface: oklch(0.985 0 0);
  --dt-raised: oklch(1 0 0);
  --dt-float: oklch(1 0 0);
  --dt-overlay: oklch(1 0 0);
  --s1: oklch(0.985 0 0);
  --s2: oklch(0.965 0 0);
  --s3: oklch(0.945 0 0);
  --s4: oklch(0.93 0 0);
  --ink-well: oklch(0.955 0 0);
  --ink-well-hover: oklch(0.94 0 0);
  --t1: rgba(38, 45, 53, 0.95);
  --t2: rgba(38, 45, 53, 0.8);
  --t3: rgba(38, 45, 53, 0.72);
  --t4: rgba(38, 45, 53, 0.58);
  --t5: rgba(38, 45, 53, 0.3);
  --label-ink: rgba(38, 45, 53, 0.7);
  --control-inset: oklch(0.962 0 0);
  --control-inset-hover: oklch(0.945 0 0);
  --surface-slab: linear-gradient(to top, oklch(0.972 0 0), oklch(0.99 0 0) 55%);
  --surface-chip: linear-gradient(to top, oklch(0.955 0 0), oklch(0.978 0 0) 55%);
  --surface-chip-hover: linear-gradient(to top, oklch(0.94 0 0), oklch(0.965 0 0) 55%);
  --border-struct-weak: rgba(38, 45, 53, 0.06);
  --border-struct: rgba(38, 45, 53, 0.1);
  --border-struct-strong: rgba(38, 45, 53, 0.15);
  --border-struct-heavy: rgba(38, 45, 53, 0.2);
  --border-struct-bold: rgba(38, 45, 53, 0.28);
  --scrim: rgba(38, 45, 53, 0.3);
  --lib-1: #0d6a9e;
  --lib-2: #0b6f97;
  --lib-3: #14476e;
  --lib-rgb: 11, 111, 151;
  --accent: #0b6f97;
  --accent-hi: #08536f;
  --accent-dim: #6f9dba;
  --accent-rgb: 11, 111, 151;
  --accent-solid: #0b6f97;
  --accent-solid-rgb: 11, 111, 151;
  --chip-selected: linear-gradient(160deg, rgba(var(--lib-rgb), 0.16), rgba(var(--lib-rgb), 0.05));
  --chip-selected-hover: linear-gradient(160deg, rgba(var(--lib-rgb), 0.24), rgba(var(--lib-rgb), 0.08));
  --chip-selected-edge: rgba(11, 111, 151, 0.42);
  --shadow-orb: 0 10px 24px -14px rgba(var(--ink-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  /* Vibe hues, muted for a light ground */
  --rose: #a8566a;
  --rose-rgb: 168, 86, 106;
  --dusk: #6f63a0;
  --dusk-rgb: 111, 99, 160;
  --slate: #4f7392;
  --slate-rgb: 79, 115, 146;
  --sage: #5a8566;
  --sage-rgb: 90, 133, 102;
  --copper: #a05435;
  --copper-rgb: 160, 84, 53;
  --sand: #8d7550;
  --sand-rgb: 141, 117, 80;
  --sd-slab-edge: oklch(0.972 0 0);
  --sd-vibe-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 0 #ffffff, 0 1px 2px rgba(38, 45, 53, 0.05);
  --sd-cta-ink: #ffffff;
  /* The handoff's explicit light-mode pins (its literal values) */
  --sd-lm-meta-ink: rgba(38, 45, 53, 0.72);
  --sd-lm-catbtn-ink: rgba(38, 45, 53, 0.74);
  --sd-lm-ink-strong: rgba(38, 45, 53, 0.9);
  --sd-lm-chip-ink: rgba(38, 45, 53, 0.78);
  --sd-lm-chip-ink-hover: rgba(38, 45, 53, 0.95);
  --sd-lm-chip-on-ink: #3f5b74;
  --sd-aurora-field:
    radial-gradient(120% 90% at 12% 100%, #9db8d2 0%, rgba(233, 238, 245, 0.9) 40%, rgba(250, 248, 244, 0) 74%),
    radial-gradient(100% 70% at 88% 0%, rgba(157, 184, 210, 0.5) 0%, rgba(233, 238, 245, 0.6) 42%, rgba(250, 248, 244, 0) 76%),
    linear-gradient(180deg, #faf8f4 0%, #eef1f5 62%, #f6f4f0 100%);
  --sd-aurora-vignette: radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.3) 100%);
}