/* K3D Tool tokens as CSS variables (the design guide's tokens.json) */
:root, [data-theme="dark"] {
  --bg: #131417;
  --panel: #1b1c21;
  --panel-2: #22242b;
  --raise: #2a2c35;
  --raise-hover: #333640;
  --field: #15161a;
  --field-hover: #1e1f23;
  --popover: #26272c;
  --tooltip: #2d2e34;
  --line: #323540;
  --line-soft: #252730;
  --text: #eceef2;
  --muted: #a8a9b1;
  --dim: #92939b;
  --faint: #4a4b53;
  --icon: #b9bac1;
  --track: #3b3c43;
  --track-hover: #45464e;
  --knob: #c8c9cf;
  --fill: #34353c;
  --fill-hover: #3a3b43;
  --edge: #8c8d95;
  --meter: #7d8796;
  --dash: #43444c;
  --scrollbar: #3a3b42;
  --accent: #efb83a;
  --accent-hot: #f5c75a;
  --accent-ink: #1c1606;
  --accent-soft: rgba(239, 184, 58, 0.12);
  --accent-line: rgba(239, 184, 58, 0.5);
  --danger: #ef5d4f;
  --on-danger: #200b08;
  --danger-soft: rgba(239, 93, 79, 0.14);
  --danger-text: #f08377;
  --success: #6cbf73;
  --success-text: #8ccf92;
  --success-soft: rgba(108, 191, 115, 0.14);
  --info: #6aa7ff;
  --info-text: #8cb8ff;
  --info-soft: rgba(106, 167, 255, 0.14);
  --scrim: rgba(8, 9, 11, 0.55);
  --focus-ring: var(--accent);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.35);
}
:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --control-xs: 24px;
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 36px;
  --header: 38px;
  --topbar: 52px;
  --statusbar: 28px;
  --sidebar: 64px;
  --panel-w: 300px;
  --inspector-w: 320px;
  --font-sans: Inter, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}