/* Studio Console tokens — the only place colours, type and sizes are defined. Dark first. */
:root {
  --ground: #0F1110; --panel: #171A18; --raised: #1E2220; --rule: #2A2E2B; --ink: #E9EBE7; --muted: #959C96; --faint: #6B726C;
  --free: #8FB39C; --free-ground: #1B2620; --money: #F2A65A; --money-ground: #2B2014; --stop: #E5735F; --stop-ground: #2C1815;
  --slate: #0A0C0B; --slate-ink: #E9EEE8; --slate-muted: #8C958E; --slate-rule: #262B28;
  --stage: #000; --focus: var(--money); --scrim: rgb(0 0 0 / .62);

  --sans: "IBM Plex Sans", "Plex fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Bricolage Grotesque", "Bricolage fallback", "IBM Plex Sans", system-ui, sans-serif;
  --fs-micro: .68rem; --fs-small: .8125rem; --fs-body: .875rem; --fs-lead: 1rem; --fs-h3: 1.125rem; --fs-h2: 1.5rem; --fs-h1: clamp(1.75rem, 3.2vw, 2.5rem);
  --track-label: .08em;

  --u: 4px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --radius: 4px; --radius-chip: 2px; --control: 36px; --row: 32px; --topbar: 48px; --tabbar: 56px; --content: 1180px; --inspector: 360px;
  --fast: 120ms; --slow: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --ground: #F4F4F1; --panel: #FBFBF9; --raised: #FFFFFF; --rule: #D5D8D3; --ink: #171A18; --muted: #5E655F; --faint: #8A908B;
  --free: #3F5E4A; --free-ground: #E4ECE6; --money: #9A5316; --money-ground: #F7E9D8; --stop: #A83A29; --stop-ground: #F6E1DD;
  --scrim: rgb(20 24 22 / .45); color-scheme: light; } }
:root[data-theme="light"] {
  --ground: #F4F4F1; --panel: #FBFBF9; --raised: #FFFFFF; --rule: #D5D8D3; --ink: #171A18; --muted: #5E655F; --faint: #8A908B;
  --free: #3F5E4A; --free-ground: #E4ECE6; --money: #9A5316; --money-ground: #F7E9D8; --stop: #A83A29; --stop-ground: #F6E1DD;
  --scrim: rgb(20 24 22 / .45); color-scheme: light; }
:root[data-stage="grey"] { --stage: #777; } :root[data-stage="white"] { --stage: #fff; }
@media (pointer: coarse) { :root { --control: 44px; --row: 44px; --fs-body: 1rem; --fs-small: .875rem; } }
@media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --slow: 0ms; } }