/* ============================================================
   VoiceIsolate Pro — Design System Tokens
   Single source of truth for all CSS custom properties.
   Import this before any component or layout CSS.
   ============================================================ */

/* Precision Studio tokens. No CDN fonts — system stacks only (CSP + offline APK). */

/* ── `hidden` attribute must always win ───────────────────────────────────
   State-managed UI here is toggled with `el.hidden = true/false`. The UA
   sheet's `[hidden] { display: none }` has UA origin, so ANY author rule
   that sets `display` (e.g. `.ps-workspace-nav { display: flex }`) silently
   un-hides the element while JS still believes it is hidden. Keep this rule
   so `hidden` stays authoritative; never set `display` on a hidden element
   to "show" it — clear the attribute instead. */
[hidden] {
  display: none !important;
}

:root {
  /* ── Precision Studio semantic surfaces ───────────────────── */
  --surface-root:  #070b10;
  --surface-panel: #0d131b;
  --surface-raised:#121a23;
  --border-subtle: #1d2a34;
  --text-primary:  #f4f7fa;
  --text-secondary:#8d9aaa;
  --action-process:#ff3d4d;
  /* Filled-surface variant of --action-process. The accent red only reaches
     3.48:1 against white, so any control that paints white text ON the action
     color uses this darker red (5.05:1) instead. Accents, borders, glows and
     text-on-dark keep --action-process. */
  --action-process-solid: #d81f30;
  --action-live:   #2ed5e5;
  --state-success: #31cf7d;
  --state-warning: #f0b541;
  --source-secondary: #9b6cff;

  /* ── Backgrounds (legacy aliases → Precision Studio) ──────── */
  --void:      var(--surface-root);
  --bg:        var(--surface-root);
  --app-bg:    var(--surface-root);
  --surface-1: var(--surface-panel);
  --surface-2: var(--surface-raised);
  --surface-3: #161f29;
  --surface-4: #1a2430;
  --canvas-bg: #05080c;
  --well-bg:   rgba(0,0,0,0.32);

  /* ── Signal red ramp ──────────────────────────────────────── */
  --red-900: #450a0a;
  --red-800: #7f1d1d;
  --red-700: #b91c1c;
  --red-600: #e11d3a;
  --red-500: var(--action-process);
  --red-400: #ff6b78;
  --red-300: #fca5a5;
  --red-wash: rgba(255,61,77,0.08);

  /* ── Status ───────────────────────────────────────────────── */
  --ok:     var(--state-success);
  --warn:   var(--state-warning);
  --danger: var(--action-process);
  --info:   var(--action-live);

  /* ── Stem colors ──────────────────────────────────────────── */
  --stem-voice: #ef4444;
  --stem-noise: #5e5e78;

  /* ── Forensic magnitude ramp ──────────────────────────────── */
  --signal-floor: #0a0e14;
  --signal-low:   #1a2a3a;
  --signal-mid:   #c2410c;
  --signal-hot:   #f97316;
  --signal-peak:  #fbbf24;
  --signal-clip:  #ffffff;

  /* ── Text ramp ────────────────────────────────────────────── */
  --text-hi:    var(--text-primary);
  --text:       #c5ced6;
  --text-2:     var(--text-secondary);
  /* Raised from #6d7a86 (4.49:1 on --surface-root) to clear WCAG AA 4.5:1. */
  --text-dim:   #7b8894;
  /* Faintest text tier. Raised from rgba(244,247,250,0.18) — 1.61:1, the 9-10px
     `.vis-hint` / `.hint-range-*` labels it paints were unreadable. 0.48 alpha
     is 4.65-4.72:1 on every VIP surface and still sits below --text-dim (5.14-
     5.44:1), so the hierarchy holds. Text tokens are AA-pinned; use a border or
     background token for decoration instead of dropping this one. */
  --text-ghost: rgba(244,247,250,0.48);

  /* ── Borders ──────────────────────────────────────────────── */
  --border:       var(--border-subtle);
  --border-strong: #26323d;
  --border-red:   rgba(220,38,38,0.14);
  --border-focus: rgba(220,38,38,0.55);

  /* ── Interaction fills ────────────────────────────────────── */
  --hover-fill: rgba(255,255,255,0.04);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --glow-red:  0 0 20px rgba(220,38,38,0.35);

  /* ── Engineering grid ─────────────────────────────────────── */
  --grid-line: rgba(220,38,38,0.035);

  /* ── Typography ───────────────────────────────────────────── */
  --font-ui:   ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Type scale ───────────────────────────────────────────── */
  --fs-3xs: 9px;
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base: 13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;

  /* ── Composite text roles ─────────────────────────────────── */
  --text-body:  400 var(--fs-base)/1.5 var(--font-ui);
  --text-label: 500 var(--fs-xs)/1 var(--font-ui);
  --eyebrow-size:  var(--fs-2xs);
  --eyebrow-track: 0.14em;

  /* ── Letter spacing ───────────────────────────────────────── */
  --ls-tight:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.06em;
  --ls-wider:   0.10em;
  --ls-widest:  0.20em;

  /* ── Corner radius ────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;

  /* ── Spacing scale (4px base) ─────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.20s;
  --dur-slow: 0.32s;

  /* ── Layout ───────────────────────────────────────────────── */
  --titlebar-h: 48px;
  --rail-w:     220px;
  --inspector-w: 320px;
  --field-nav-h: 64px;
}

.ps-tabular,
.time-readout,
.hs-val,
.slider-val,
.ec-meter-val {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}