/* theme — every UI/UX decision in one file: palette, type, spacing, dimensions.
   Portable: copy to a sibling app (zygmund, …) and reskin it by editing only this file.
   Fixed — never follows the system theme (color-scheme locks UA widgets too). */
:root {
  color-scheme: dark;

  /* surfaces — near-black with a cool cast, darkest to lightest */
  /* warm charcoal family */
  --bg: hsl(0 3% 9%);
  --inset: hsl(0 3% 5.5%);
  --panel: #2a2727;
  --track: hsl(0 0% 26%);
  --line: hsl(0 0% 22%); /* hairline section borders — a whisper above the bg */

  /* ink — warm-neutral greys */
  --idle: hsl(0 3% 78%);
  --dim: hsl(0 3% 60%);
  --faint: hsl(0 3% 48%);

  /* accents: warm-white chassis, rose / amber / mint voices */
  --accent: #f1e9e5;
  --voice0: #d86471;
  --voice1: #eab140;
  --voice2: #8fdfc7;
  --tick: #fff;

  /* type */
  --font: 200 13px/1.5 "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-strong: 400;
  --text-small: 12px;
  --tracking: 1px;
  --tracking-wide: 2px;

  /* spacing ladder: row rhythm / block step / section + panel padding / page frame */
  --sp-row: 8px;
  --sp-block: 12px;
  --sp-section: 20px;
  --sp-page: 40px;
  --sp-page-x: 24px;
  --gap-inline: 10px; /* label · bar · value */

  /* dimensions */
  --app-width: 886px;
  --voice-width: 282px;
  --bar-h: 6px;
  --scope-h: 58px;
  --slot-w: 28px;
  --label-w: 52px;
  --val-w: 40px;
}