/* HTC design tokens — the single source for colour, type, spacing, radius, control sizes and restraint.
   Layout CSS (app.css) and components consume these; JavaScript mirrors only what it must (app/tokens.js:
   role colours for canvas/inline styles, breakpoints for matchMedia). Media queries cannot read custom
   properties: breakpoints are 640 px (phone) and 900 px (compact) — keep app/tokens.js BREAKPOINTS in sync.
   UI Product Design Pass 0.2: the chrome is NEUTRAL graphite; colour carries music (part roles, section directions)
   and state (play, selection, focus). One accent (cyan) for play / primary / playhead / focus. No glow, no gradients. */
:root {
  /* surfaces: 0 app → 1 surface → 2 raised → 3 control/hover; inset = wells (readouts, maps, waveforms) */
  --bg: #0c0e10; --bg-2: #101316; --panel: #14181b; --panel-2: #1a1f23; --panel-3: #232a2f;
  --line: #20262a; --line-2: #2d353b; --line-soft: #181d20; --inset: #090b0c;
  /* text hierarchy */
  --text: #eceff1; --text-2: #bcc4c9; --muted: #88929a; --faint: #5b646b;
  /* accent + secondary state colours */
  --cyan: #45d3c9; --cyan-dim: #2a8c86; --cyan-ink: #04221f; --teal: #2aa39b; --violet: #9c8af0; --amber: #f0b04e; --rose: #f07892; --green: #86d992;
  --cyan-wash: rgba(69, 211, 201, .08); --cyan-wash-2: rgba(69, 211, 201, .15);
  /* restraint: one focus ring, two elevations (overlays only) */
  --ring: 0 0 0 3px rgba(69, 211, 201, .16);
  --elev: 0 8px 24px rgba(0, 0, 0, .28);
  --elev-2: 0 18px 44px rgba(0, 0, 0, .5);
  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --gap: 16px;
  /* radius: instrument surfaces, not bubbles */
  --radius-s: 3px; --radius: 6px; --radius-l: 10px; --radius-pill: 999px;
  /* control heights (touch: minimum hit target on phones) */
  --control-s: 28px; --control: 34px; --control-l: 44px; --touch: 40px;
  --appbar: 56px; --rail: 340px; --index: 72px;
  /* type: system faces only (offline-first). Display for titles and the prompt; mono for musical readouts. */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --t-2xs: 10.5px; --t-xs: 11px; --t-s: 12.5px; --t-m: 14px; --t-l: 16px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 32px; --t-4xl: 40px;
  /* motion: short, functional */
  --ease: cubic-bezier(.2, .7, .2, 1); --fast: .12s; --med: .22s;
  /* musical semantics: section direction, part role (calmer than 0.1: colour is information, not decoration) */
  --dir-establish: #3d6a7e; --dir-reinforce: #2f958e; --dir-develop: #4c8f68; --dir-destabilize: #a4693b; --dir-withhold: #574e86; --dir-prepare: #a3813d; --dir-release: #3fbdb4; --dir-recap: #33819f; --dir-reinterpret: #8059aa; --dir-dissolve: #444f56;
  --role-drums: #e8a84c; --role-break: #ec8a5c; --role-bass: #9886ec; --role-chords: #41c4bb; --role-pad: #62a0ec; --role-lead: #ec7690; --role-texture: #7ccdb9; --role-other: #88929a;
  /* status */
  --status-candidate: var(--amber); --status-previous: var(--muted); --status-historical: var(--faint);
}