/*
 * Design tokens — single source of truth (in progress, corrected 2026-08-18).
 *
 * CORRECTION: the first version of this file was extracted verbatim from
 * the FIRST of three :root blocks in miniapp.css (line 1). That was wrong.
 * miniapp.css alone has three competing :root blocks (lines 1, 602, 4711 --
 * the last one labelled "Premium studio skin: visual-only layer"), and the
 * full concatenated bundle (miniapp.css + webapp.css + pulseveter_v2.css +
 * pulseveter_v2_exact.css + pulseveter_v2_reference.css +
 * pulseveter_v3_art.css + pulseveter_v4_unified.css, see
 * scripts/build_static_css_bundles.ps1) has at least 11 :root occurrences
 * total, each able to override individual custom properties independently
 * -- there is no single "winning block", the actual final value of each
 * token depends on which file last redefines that *specific* property name.
 *
 * The values below were captured by running
 * getComputedStyle(document.documentElement) directly against the live
 * page (https://studio.pulseveter.ru/webapp, no data-scenario active) on
 * 2026-08-18 -- ground truth from the browser's actual cascade resolution,
 * not from re-tracing 11 source blocks by hand. This is the only reliable
 * method here; static analysis of file order was tried first and produced
 * wrong values (e.g. --accent was documented as #39c5ff, cyan; the site
 * actually renders #8b5cf6, purple).
 *
 * DONE 2026-08-18: the four body[data-scenario="..."] override blocks
 * below are now also live-verified (clicked each .mode-tab on the live
 * page, re-ran getComputedStyle(document.body) after each). Finding: only
 * 5 of the 17 properties these blocks touch actually vary by scenario in
 * production today; the other 12 resolve to the same "Premium studio
 * skin" value regardless of active scenario (a later block elsewhere in
 * the bundle wins for those 12 unconditionally). See the comment directly
 * above the four blocks below for the full explanation.
 *
 * Also NOT in this file: --pv2-*, --pv3-*, --pv4-*, --pv5-*, --pvx-*,
 * --studio-* -- five-plus fully parallel, simultaneously-loaded token
 * namespaces (e.g. --pv2-cyan #23c8ff, --pv3-cyan #2acbff, --pv4-cyan
 * #25c9ff, --pv5-cyan #2acbff, --pvx-cyan #22c8ff -- all live, all
 * slightly different shades of the same accent).
 *
 * CORRECTION 2026-08-18 (second pass): --pv6-* is NOT dead. An earlier
 * capture at a desktop viewport found all seven empty and called them
 * "defined nowhere" -- wrong, they are real, mobile/Fold-responsive layout
 * tokens, just conditionally defined:
 *   - --pv6-nav-space and --pv6-player-space: defined on both :root and
 *     .pv3-reference inside `@media (max-width: 760px)`
 *     (pulseveter_v4_unified.css ~line 6580) -- confirmed live at 390px
 *     (e.g. --pv6-nav-space: calc(84px + env(safe-area-inset-bottom))).
 *   - --pv6-header-top, --pv6-header-height, --pv6-air-top,
 *     --pv6-action-space: defined on .pv3-reference in the same
 *     `max-width: 760px` block -- confirmed live at 390px.
 *   - --pv6-fold-header-bottom: defined separately, on .pv3-reference
 *     inside `@media (min-width: 761px) and (max-width: 1024px)`
 *     (~line 6923, the Fold-inner/tablet range) -- NOT confirmed live: in
 *     this session .pv3-reference itself was absent from the DOM at both
 *     390px and a fresh 768px navigation. This is the same DOM-reparent
 *     build non-determinism already documented as IND-07 in the
 *     independent audit (.pv2-exact-shell sometimes builds, sometimes
 *     doesn't, across otherwise-identical page loads) -- not evidence
 *     the token itself is unused, but real evidence that anything scoped
 *     to .pv3-reference is unreliable today regardless of viewport.
 * Reconciling which pv-namespace is actually load-bearing per component,
 * and retiring the rest, is separate follow-up work -- see
 * CSS_SELECTOR_OWNERSHIP_MAP.md.
 *
 * This file is loaded BEFORE the existing bundles
 * (pulseveter_webapp.bundle.css / pulseveter_miniapp.bundle.css) in both
 * webapp.html and miniapp.html. Those bundles still contain the original
 * (now superseded-by-later-blocks) :root declarations -- intentionally not
 * removed yet, so there is never a window where a rule elsewhere in the
 * cascade references a token that isn't defined. Because later blocks in
 * the existing bundles still win the cascade for these properties today,
 * this file's corrected values currently have NO visual effect yet -- they
 * only become load-bearing once the duplicated/superseded blocks are
 * removed from the six generation files, which is a later, separate step.
 */

:root {
  color-scheme: dark;
  --bg-top: #05050a;
  --bg-bottom: #11101a;
  --panel: rgba(13, 13, 22, 0.86);
  --panel-strong: rgba(18, 18, 30, 0.97);
  --panel-inner: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.105);
  --border-strong: rgba(216, 181, 109, 0.34);
  --line: rgba(255, 255, 255, 0.105);
  --line-strong: rgba(216, 181, 109, 0.36);
  --text: rgba(255, 250, 241, 0.96);
  --muted: rgba(225, 219, 242, 0.84);
  --accent: #8b5cf6;
  --accent-soft: #b772ff;
  --accent-3: #fff7df;
  --accent-pale: rgba(139, 92, 246, 0.18);
  --accent-warm: #d8b56d;
  --accent-warm-pale: rgba(216, 181, 109, 0.13);
  --hero-tint-a: rgba(139, 92, 246, 0.19);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(40, 195, 255, 0.18);
  --hero-orb-b: rgba(73, 117, 255, 0.12);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.13));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.38), rgba(216, 181, 109, 0.13));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.19), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(255, 255, 255, 0.12);
  --scenario-card-shadow: rgba(139, 92, 246, 0.15);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016));
  --scenario-input-border: rgba(255, 255, 255, 0.14);
  --scenario-focus-ring: rgba(139, 92, 246, 0.22);
  --scenario-soft-text: rgba(235, 230, 255, 0.82);
  --danger: #ff8a8a;
  --success: #7ce8b4;
  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --shadow-xl: 0 34px 100px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 20px 56px rgba(0, 0, 0, 0.28);
}

/* VERIFIED 2026-08-18 against the live cascade: clicked each .mode-tab on
   https://studio.pulseveter.ru/webapp (no login required, pure client-side
   UI state) and ran getComputedStyle(document.body) after each, capturing
   all 17 properties these four blocks touch. Result: only 5 of the 17
   actually differ by scenario in production today --
   --scenario-focus-ring, --scenario-input-bg, --scenario-input-border,
   --scenario-soft-text, --scenario-surface (these matched the original
   cyan-family extraction exactly, so those five values were already
   correct). The other 12 properties
   (--hero-tint-a/b, --hero-orb-a/b, --mode-signal-*, --mode-tab-active,
   --mode-pill-border, --scenario-card-border/shadow,
   --scenario-surface-strong) resolved to the IDENTICAL "Premium studio
   skin" purple/gold value regardless of which scenario was active -- a
   later block elsewhere in the bundle (outside this file, not yet
   identified to the exact selector/line) redefines those 12 properties
   without a per-scenario condition and wins the cascade for all four
   scenarios equally, making the per-scenario variation for those 12
   properties dead in production right now. Below reflects the true live
   value for every property under every scenario (constant where the live
   cascade is currently constant), not the original never-overridden
   design intent -- flagging this distinction for whoever does the real
   consolidation pass. */

body[data-scenario="GPT_LYRICS"] {
  --hero-tint-a: rgba(139, 92, 246, 0.21);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.2);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.12));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(84, 208, 255, 0.078), rgba(255, 255, 255, 0.014));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-card-shadow: rgba(139, 92, 246, 0.14);
  --scenario-input-bg: linear-gradient(180deg, rgba(85, 202, 255, 0.055), rgba(255, 255, 255, 0.01));
  --scenario-input-border: rgba(104, 214, 255, 0.18);
  --scenario-focus-ring: rgba(97, 210, 255, 0.14);
  --scenario-soft-text: rgba(221, 242, 255, 0.84);
}

body[data-scenario="READY_POEM"] {
  --hero-tint-a: rgba(139, 92, 246, 0.21);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.2);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.12));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(74, 235, 194, 0.07), rgba(255, 188, 114, 0.028));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-card-shadow: rgba(139, 92, 246, 0.14);
  --scenario-input-bg: linear-gradient(180deg, rgba(72, 236, 196, 0.048), rgba(255, 190, 112, 0.012));
  --scenario-input-border: rgba(95, 239, 207, 0.18);
  --scenario-focus-ring: rgba(95, 239, 207, 0.14);
  --scenario-soft-text: rgba(228, 244, 238, 0.84);
}

body[data-scenario="SUNO_LYRICS"] {
  --hero-tint-a: rgba(139, 92, 246, 0.21);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.2);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.12));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(122, 145, 255, 0.075), rgba(74, 221, 255, 0.02));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-card-shadow: rgba(139, 92, 246, 0.14);
  --scenario-input-bg: linear-gradient(180deg, rgba(124, 162, 255, 0.048), rgba(72, 218, 255, 0.012));
  --scenario-input-border: rgba(124, 162, 255, 0.18);
  --scenario-focus-ring: rgba(124, 162, 255, 0.14);
  --scenario-soft-text: rgba(227, 236, 255, 0.84);
}

body[data-scenario="INSTRUMENTAL"] {
  --hero-tint-a: rgba(139, 92, 246, 0.21);
  --hero-tint-b: rgba(216, 181, 109, 0.105);
  --hero-orb-a: rgba(139, 92, 246, 0.2);
  --hero-orb-b: rgba(216, 181, 109, 0.14);
  --mode-signal-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(216, 181, 109, 0.12));
  --mode-signal-dot: #d8b56d;
  --mode-signal-shadow: rgba(216, 181, 109, 0.62);
  --mode-tab-active: linear-gradient(135deg, rgba(139, 92, 246, 0.36), rgba(216, 181, 109, 0.12));
  --mode-pill-border: rgba(216, 181, 109, 0.34);
  --scenario-surface: linear-gradient(180deg, rgba(255, 184, 104, 0.07), rgba(225, 139, 86, 0.022));
  --scenario-surface-strong: linear-gradient(135deg, rgba(139, 92, 246, 0.17), rgba(216, 181, 109, 0.075));
  --scenario-card-border: rgba(216, 181, 109, 0.2);
  --scenario-card-shadow: rgba(139, 92, 246, 0.14);
  --scenario-input-bg: linear-gradient(180deg, rgba(255, 188, 118, 0.048), rgba(223, 140, 90, 0.012));
  --scenario-input-border: rgba(255, 194, 126, 0.18);
  --scenario-focus-ring: rgba(255, 190, 120, 0.14);
  --scenario-soft-text: rgba(255, 237, 223, 0.82);
}