/* ============================================================================
   Verquil — Spectra design system · production tokens
   Direction A「Spectra」— graphite precision terminal (single mint signal accent).
   Canonical authority = DESIGN.md. This file is the machine-readable :root the
   frontend consumes; never hand-write bare hex/px in components — reference tokens.
   ============================================================================ */

:root{
  /* ---- surface (tonal near-black graphite, NOT pure black + neon) ---------- */
  --bg:#0b0e10;              /* page base */
  --surface:#101419;         /* raised panels, sidebar, cards */
  --surface-2:#161c22;       /* nested / hover surface */
  --surface-3:#1f262e;       /* controls, chips, avatar wells */
  --surface-sunken:#090b0d;  /* wells, code, waveform track */

  /* ---- ink (text roles) --------------------------------------------------- */
  --ink:#eef1f5;             /* primary text — on --surface 16.6:1 AAA */
  --ink-2:#c1cad4;           /* secondary text — on --surface 11.4:1 AAA */
  --ink-muted:#8b95a1;       /* muted / captions — on --surface 6.1:1 AA+ */
  --ink-faint:#828c96;       /* mono labels/timecodes — on --surface 5.4:1, --surface-2 5.0:1 (AA ✓) */

  /* ---- accent (single mint signal — the only saturated color) ------------- */
  --accent:#3ce0c0;          /* mint signal — as text on --surface 11.6:1 AAA */
  --accent-2:#2bbfa4;        /* hover / pressed mint */
  --on-accent:#04211c;       /* ink on mint fills — 9.6:1 on --accent (dark-on-bright rule) */
  --accent-soft:rgba(60,224,192,.10);   /* tint wash (keyterm hit, selected row) */
  --accent-line:rgba(60,224,192,.34);   /* accent hairline / chip border */

  /* ---- speaker tonal ramp (semantic: one tone = one speaker; NOT rainbow) -- */
  --spk-1:#3ce0c0;           /* S1 — mint */
  --spk-2:#8fb9b4;           /* S2 — muted teal   (on --surface 7.9:1) */
  --spk-3:#a7aeb2;           /* S3 — neutral      (on --surface 8.6:1) */
  --spk-4:#7d868b;           /* S4 — dim neutral  (on --surface 4.9:1, chip/dot use) */

  /* ---- status (single-meaning; red = fail/danger, mint = ok, NOT market) --- */
  --ok:#3ce0c0;              /* completed */
  --info:#5cc2ff;            /* transcribing/running — on --surface 9.4:1 */
  --warn:#e0b46a;            /* low-confidence flag — on --surface 9.2:1 */
  --danger:#f08a72;          /* failed — on --surface 7.4:1 */
  --info-line:rgba(92,194,255,.30);
  --warn-line:rgba(224,180,106,.34);
  --danger-line:rgba(240,138,114,.32);

  /* ---- lines: two roles (WCAG 1.4.11) ------------------------------------- */
  --hairline:rgba(150,172,180,.13);      /* decorative separators (not 1.4.11) */
  --hairline-2:rgba(150,172,180,.20);    /* stronger decorative divide */
  --control-border:#646c76;              /* interactive control edges — 3.6:1 vs --surface ✓ */

  /* ---- spacing scale — DESIGN-PLAYBOOK §2A, 9 steps, no off-scale px ------- */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  /* ---- radius ------------------------------------------------------------- */
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* ---- elevation (tonal-first; shadow only where a panel truly floats) ----- */
  --shadow-1:0 1px 0 rgba(255,255,255,.02) inset, 0 2px 8px rgba(0,0,0,.28);
  --shadow-float:0 24px 60px -24px rgba(0,0,0,.66), 0 2px 0 rgba(255,255,255,.03) inset;

  /* ---- type families ------------------------------------------------------ */
  --f-display:'Space Grotesk','Noto Sans TC',system-ui,sans-serif;  /* display/hero/wordmark */
  --f-body:'IBM Plex Sans','Noto Sans TC',system-ui,sans-serif;     /* UI / body */
  --f-mono:'IBM Plex Mono','Noto Sans TC',ui-monospace,monospace;   /* timecodes / data / labels */

  /* ---- type scale — 7 steps, each carries size/line-height/weight ---------- */
  --fs-display:clamp(38px,5vw,64px); --lh-display:1.05; --fw-display:700;
  --fs-h2:clamp(30px,4vw,50px);      --lh-h2:1.08;      --fw-h2:700;
  --fs-h3:clamp(25px,3vw,37px);      --lh-h3:1.12;      --fw-h3:700;
  --fs-h4:21px;                      --lh-h4:1.25;      --fw-h4:600;
  --fs-lead:18.5px;                  --lh-lead:1.6;     --fw-lead:400;
  --fs-body:16px;                    --lh-body:1.6;     --fw-body:400;
  --fs-sm:14px;                      --lh-sm:1.55;      --fw-sm:400;
  --fs-meta:12.5px;                  --lh-meta:1.4;     --fw-meta:400;  /* mono telemetry */
  --tracking-tight:-.02em;   /* display */
  --tracking-wide:.12em;     /* mono eyebrows / labels (uppercase) */

  /* ---- motion tokens (reduced-motion first; one orchestrated signature) ---- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --dur-fast:140ms; --dur-med:320ms; --dur-slow:720ms; --dur-sig:2100ms;

  /* ---- layout ------------------------------------------------------------- */
  --shell:1240px;
  --header-h:82px;
}

/* ---- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1;}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit}

/* ---- utilities ------------------------------------------------------------ */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--s6)}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum" 1,"zero" 1;letter-spacing:.01em}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:var(--fs-meta);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--ink-muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- focus visibility — quality floor (keyboard) -------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* ---- reduced motion: respect system; signature degrades to resolved still -- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
/* ?still — freeze for screenshots, identical to reduced-motion end-state */
html[data-still] *,html[data-still] *::before,html[data-still] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
}