/* Patchbay design tokens — generated from tokens.json. Themes: studio, night (default: studio).
   Switch theme with <html data-theme="night">. */
:root, [data-theme="studio"] {
  --panel: #e3ddd1;
  --panel-raised: #f3efe7;
  --panel-sunk: #d2cbbd;
  --seam: #bab2a3;
  --edge: #7f776a;
  --ink: #1d1b18;
  --ink-muted: #59534a;
  --signal: #f2591c;
  --signal-ink: #973307;
  --on-signal: #1f0e04;
  --lcd: #bec3a6;
  --lcd-ink: #18210f;
  --lcd-ghost: #adb393;
  --led-green: #21c454;
  --led-amber: #ffa90a;
  --led-red: #ff3b2f;
  --key-wall: 0 4px 0 #b4ab98, 0 5px 0 #8a8273, 0 7px 8px -2px #2a20103d;
  --key-wall-signal: 0 4px 0 #b9430f, 0 5px 0 #7f2b06, 0 7px 8px -2px #5a1e044d;
  --key-wall-ink: 0 4px 0 #000000, 0 5px 0 #000000, 0 7px 8px -2px #00000059;
  --key-cap: inset 0 1px 0 #ffffffb3, inset 0 -2px 0 #0000000d;
  --well: inset 0 2px 3px #00000033, inset 0 0 0 1px #0000001f, 0 1px 0 #ffffffb3;
  --plate: inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #0000001a, 0 1px 2px #2a201024;
  --float: 0 2px 0 #2a20101a, 0 16px 32px -8px #2a201066;
  --glow-green: 0 0 4px 1px #21c45499, 0 0 10px 2px #21c45440;
  --glow-amber: 0 0 4px 1px #ffa90a99, 0 0 10px 2px #ffa90a40;
  --glow-red: 0 0 4px 1px #ff3b2f99, 0 0 10px 2px #ff3b2f40;
  --glow-signal: 0 0 4px 1px #f2591c99, 0 0 10px 2px #f2591c40;
  --focus-ring: 0 0 0 2px #e3ddd1, 0 0 0 4px #973307;
  color-scheme: light;
}
[data-theme="night"] {
  --panel: #1c1b19;
  --panel-raised: #2c2a26;
  --panel-sunk: #121110;
  --seam: #38352f;
  --edge: #7a7367;
  --ink: #efe9dd;
  --ink-muted: #aaa295;
  --signal: #ff6a29;
  --signal-ink: #ff9361;
  --on-signal: #1f0e04;
  --lcd: #0a0d0c;
  --lcd-ink: #7cf2c8;
  --lcd-ghost: #15201c;
  --led-green: #3df27a;
  --led-amber: #ffbe38;
  --led-red: #ff5145;
  --key-wall: 0 4px 0 #141311, 0 5px 0 #050505, 0 8px 10px -2px #000000a6;
  --key-wall-signal: 0 4px 0 #a53a0b, 0 5px 0 #4a1803, 0 8px 10px -2px #000000a6;
  --key-wall-ink: 0 4px 0 #a39b8c, 0 5px 0 #6e675b, 0 8px 10px -2px #000000a6;
  --key-cap: inset 0 1px 0 #ffffff1f, inset 0 -2px 0 #00000033;
  --well: inset 0 2px 4px #000000b3, inset 0 0 0 1px #00000099, 0 1px 0 #ffffff14;
  --plate: inset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000080, 0 1px 2px #00000080;
  --float: 0 2px 0 #00000080, 0 16px 32px -8px #000000d9;
  --glow-green: 0 0 6px 1px #3df27acc, 0 0 16px 3px #3df27a59;
  --glow-amber: 0 0 6px 1px #ffbe38cc, 0 0 16px 3px #ffbe3859;
  --glow-red: 0 0 6px 1px #ff5145cc, 0 0 16px 3px #ff514559;
  --glow-signal: 0 0 6px 1px #ff6a29cc, 0 0 16px 3px #ff6a2959;
  --focus-ring: 0 0 0 2px #1c1b19, 0 0 0 4px #ff9361;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-hair: 2px;
  --radius-key: 4px;
  --radius-plate: 8px;
  --radius-round: 999px;
  --dur-tick: 60ms;
  --dur-press: 90ms;
  --dur-release: 140ms;
  --dur-snap: 160ms;
  --dur-panel: 220ms;
  --ease-thunk: cubic-bezier(.3, 1.6, .55, 1);
  --ease-release: cubic-bezier(.2, 1.35, .45, 1);
  --ease-detent: cubic-bezier(.5, 0, .1, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-led: cubic-bezier(0, 0, .2, 1);
  --font-sans: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --type-display-family: var(--font-sans);
  --type-display-size: 40px;
  --type-display-line: 40px;
  --type-display-weight: 800;
  --type-display-tracking: -0.01em;
  --type-title-family: var(--font-sans);
  --type-title-size: 20px;
  --type-title-line: 24px;
  --type-title-weight: 700;
  --type-title-tracking: 0em;
  --type-label-family: var(--font-sans);
  --type-label-size: 11px;
  --type-label-line: 12px;
  --type-label-weight: 700;
  --type-label-tracking: 0.12em;
  --type-body-family: var(--font-sans);
  --type-body-size: 14px;
  --type-body-line: 20px;
  --type-body-weight: 450;
  --type-body-tracking: 0em;
  --type-value-family: var(--font-mono);
  --type-value-size: 12px;
  --type-value-line: 16px;
  --type-value-weight: 500;
  --type-value-tracking: 0.02em;
  --type-lcd-family: var(--font-mono);
  --type-lcd-size: 28px;
  --type-lcd-line: 32px;
  --type-lcd-weight: 600;
  --type-lcd-tracking: 0.04em;
}
/* Type styles as utility classes (optional) */
.type-display { font-family: var(--type-display-family); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
.type-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); letter-spacing: var(--type-body-tracking); }
.type-value { font-family: var(--type-value-family); font-size: var(--type-value-size); line-height: var(--type-value-line); font-weight: var(--type-value-weight); letter-spacing: var(--type-value-tracking); }
.type-lcd { font-family: var(--type-lcd-family); font-size: var(--type-lcd-size); line-height: var(--type-lcd-line); font-weight: var(--type-lcd-weight); letter-spacing: var(--type-lcd-tracking); }