:root {
  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Radii — sharp (max 6px) */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;

  /* Typography */
  --text-tag: 10px;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --line-height-tight: 1.45;
  --line-height-body: 1.7;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.14em;
  --tracking-wordmark: 0.14em;

  /* Motion */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: var(--dur) var(--ease);

  /* Layout */
  --board-gap: var(--space-4);
  --size-tool: 32px;
  --size-icon-sm: 14px;
  --size-icon-md: 16px;
  --size-icon-flame: 18px;
  --icon-stroke: 1.75;
  --card-pad: var(--space-3);
  --label-pad-y: 2px;
  --label-pad-x: 6px;

  /* Borders & elevation */
  --border-hairline: 0.5px solid var(--hairline);
  --border-col: 0.5px solid var(--hairline-col);
  --border-pinned: 1px solid var(--edge-light);
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
  --card-shadow-light: 0 1px 2px rgba(60, 50, 30, 0.12);

  /* Modal / panel widths */
  --modal-width: 400px;
  --modal-width-wide: 540px;
  --modal-width-labels: 480px;
  --modal-max-height: 760px;
  --ai-panel-width: 340px;
  --ctx-min-width: 160px;
  --textarea-from-text-min: 180px;
  --textarea-desc-min: 200px;
  --ai-input-max-height: 100px;
  --labels-list-max: 400px;
  --label-name-max: 14rem;
}

[data-theme="dark"] {
  --bg: #0b0c0e;
  --surface-header: #121316;
  --surface-1: #121316;
  --surface-2: #16181b;
  --surface-3: #1b1d21;
  --hairline: #26282c;
  --hairline-col: #26282c;
  --edge-light: #34373d;
  --text-primary: #e6e6e8;
  --text-secondary: #9a9ca2;
  --text-muted: #5d5f65;
  --accent: #8b6fd6;
  --accent-fg: #e6e6e8;
  --accent-edge: #a98ee8;
  --accent-icon: var(--accent);
  --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
  --signal: #f05551;
  --signal-edge: #5a2723;
  --danger-fg: #d07a6e;
  --danger-border: #46322e;
  --danger-dim: color-mix(in srgb, var(--danger-fg) 10%, transparent);
  --scrim: rgba(0, 0, 0, 0.72);
  --scrollbar-track: var(--surface-1);
  --scrollbar-thumb: var(--surface-3);
  --scrollbar-thumb-hover: var(--edge-light);
  --drop-indicator: var(--accent);

  --label-default-fg: #9a9ca2;
  --label-default-border: #34373d;
  --label-green-fg: #6fb88a;
  --label-green-border: #324a38;
  --label-blue-fg: #82a9d6;
  --label-blue-border: #334858;
  --label-orange-fg: var(--signal);
  --label-orange-border: var(--signal-edge);
  --label-purple-fg: var(--label-default-fg);
  --label-purple-border: var(--label-default-border);
  --label-red-fg: var(--signal);
  --label-red-border: var(--signal-edge);
  --label-teal-fg: #72b8ab;
  --label-teal-border: #2e4540;
  --label-pink-fg: #d094b0;
  --label-pink-border: #45343e;
  --label-gray-fg: #9a9ca2;
  --label-gray-border: #34373d;
  --label-lime-fg: #9ab872;
  --label-lime-border: #3a482e;
  --label-indigo-fg: #929ed4;
  --label-indigo-border: #333858;
}

[data-theme="light"] {
  --bg: #d4cebf;
  --surface-header: #ccc6b6;
  --surface-1: #d2cbb8;
  --surface-2: #e3ddce;
  --surface-3: #ece6d8;
  --hairline: #bdb6a4;
  --hairline-col: #b0a996;
  --edge-light: #ebe5d6;
  --text-primary: #3d3a34;
  --text-secondary: #56524a;
  --text-muted: #928c7d;
  --accent: #45413a;
  --accent-fg: #d4cebf;
  --accent-edge: #5c5850;
  --accent-icon: var(--accent);
  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
  --signal: #a8412f;
  --signal-edge: #6e3028;
  --border-pinned: 1px solid var(--hairline);
  --danger-fg: #a8412f;
  --danger-border: var(--signal-edge);
  --danger-dim: color-mix(in srgb, var(--danger-fg) 10%, transparent);
  --scrim: rgba(61, 58, 52, 0.36);
  --scrollbar-track: var(--surface-1);
  --scrollbar-thumb: var(--hairline);
  --scrollbar-thumb-hover: var(--text-muted);
  --drop-indicator: var(--accent);

  --label-default-fg: #56524a;
  --label-default-border: #bdb6a4;
  --label-green-fg: #5a7050;
  --label-green-border: #9aaa8c;
  --label-blue-fg: #4e6878;
  --label-blue-border: #98a8b0;
  --label-orange-fg: var(--signal);
  --label-orange-border: var(--signal-edge);
  --label-purple-fg: var(--label-default-fg);
  --label-purple-border: var(--label-default-border);
  --label-red-fg: var(--signal);
  --label-red-border: var(--signal-edge);
  --label-teal-fg: #4a7068;
  --label-teal-border: #94b0a8;
  --label-pink-fg: #886070;
  --label-pink-border: #c0a8b0;
  --label-gray-fg: #56524a;
  --label-gray-border: #bdb6a4;
  --label-lime-fg: #687850;
  --label-lime-border: #a8b090;
  --label-indigo-fg: #585878;
  --label-indigo-border: #a0a0b8;
}