/* Design tokens — Surgical-Journey CMS. Light default; dark under [data-theme="dark"].
   --color-* are themed (incl. --color-backdrop, the dialog scrim); --font-*, --text-*, --pad-*, --space-*, --radius-*, --shadow-*,
   --app-* (pane widths, bar heights), --control-h-*, --badge-h-*, --tab-h-* (control heights), --row-h-*, --cols-* (table rows, column templates)
   and --tl-* (timeline strips) are not. The app needs no layout file of its own. */
:root, [data-theme="light"] {
  --color-bg-app: #F3F4F6;
  --color-bg-surface: #FFFFFF;
  --color-bg-sunken: #E9EBEF;
  --color-bg-hover: #F0F2F5;
  --color-border: #D5D9E0;
  --color-border-strong: #AEB5C0;
  --color-text: #161A21;
  --color-text-2: #454C59;
  --color-text-3: #5F6773;
  --color-text-inverse: #FFFFFF;
  --color-accent: #1E5EA8;
  --color-accent-hover: #174B88;
  --color-accent-text: #174B88;
  --color-accent-soft: #E3EDF9;
  --color-accent-border: #A9C4E6;
  --color-error: #B42318;
  --color-error-soft: #FDE8E6;
  --color-error-border: #F0A69F;
  --color-warning: #B45309;
  --color-warning-soft: #FEF1D6;
  --color-warning-border: #F0C46B;
  --color-success: #067647;
  --color-success-soft: #DCF5E6;
  --color-success-border: #8FD8B0;
  --color-info: #5B33D6;
  --color-info-soft: #ECE8FB;
  --color-info-border: #C2B5F2;
  --color-locked: #5F6773;
  --color-locked-soft: #EEF0F3;
  --color-locked-border: #C9CED6;
  --color-backdrop: rgba(14, 17, 22, 0.45);
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-micro: 10.5px;
  --text-xs: 11px;
  --text-mono-sm: 11.5px;
  --text-sm: 12px;
  --text-compact: 12.5px;
  --text-mono: 12.5px;
  --text-table: 13px;
  --text-base: 14px;
  --text-form: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --pad-1: 4px;
  --pad-2: 8px;
  --pad-3: 12px;
  --pad-4: 16px;
  --pad-5: 20px;
  --pad-6: 24px;
  --pad-card: 10px 14px;
  --pad-row: 8px 12px;
  --pad-section: 14px 16px;
  --app-nav-w: 216px;
  --app-topbar-h: 56px;
  --app-tabs-h: 40px;
  --app-rail-w: 192px;
  --app-canvas-w: 672px;
  --app-inspector-w: 360px;
  --app-bottom-drawer-h: 216px;
  --app-drawer-w: 440px;
  --app-side-w: 380px;
  --app-form-w: 760px;
  --app-summary-w: 440px;
  --app-toolbar-h: 36px;
  --app-filterbar-h: 44px;
  --app-drawer-head-h: 48px;
  --app-tray-h: 64px;
  --control-h-xs: 26px;
  --control-h-sm: 28px;
  --control-h: 32px;
  --control-h-lg: 36px;
  --control-h-xl: 40px;
  --badge-h: 20px;
  --badge-h-sm: 18px;
  --badge-h-xs: 16px;
  --tab-h: 38px;
  --tab-h-sm: 30px;
  --row-h: 36px;
  --row-h-head: 30px;
  --cols-lint: 18px 88px 132px 1fr auto;
  --cols-lint-compact: 18px 84px 1fr;
  --cols-diff: 96px 176px 110px 1fr 24px 1fr;
  --cols-diff-wide: 120px 190px 130px 1fr 24px 1fr 120px;
  --cols-diff-content: 110px 190px 1fr 24px 1fr 110px;
  --cols-diff-catalog: 110px 210px 1fr 24px 1fr 120px;
  --cols-log: 34px 110px 1fr 240px 150px;
  --cols-rule: 24px 140px 1fr 1fr;
  --cols-kv: 120px 1fr;
  --cols-kv-wide: 140px 1fr;
  --cols-publish: 1fr var(--app-summary-w);
  --tl-phases-h: 22px;
  --tl-axis-h: 26px;
  --tl-anchors-h: 36px;
  --tl-row-h: 30px;
  --tl-item-h: 22px;
  --tl-span-h: 16px;
  --mini-tl-h: 44px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 20, 28, 0.06);
  --shadow-2: 0 4px 12px rgba(16, 20, 28, 0.10);
  --shadow-3: 0 12px 32px rgba(16, 20, 28, 0.16);
  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-accent);
}

[data-theme="dark"] {
  --color-bg-app: #0E1116;
  --color-bg-surface: #161A21;
  --color-bg-sunken: #0B0D11;
  --color-bg-hover: #1D222B;
  --color-border: #2B313B;
  --color-border-strong: #3E4653;
  --color-text: #E8EAEE;
  --color-text-2: #B4BAC5;
  --color-text-3: #98A0AC;
  --color-text-inverse: #0E1116;
  --color-accent: #7FB2F0;
  --color-accent-hover: #9CC4F5;
  --color-accent-text: #9CC4F5;
  --color-accent-soft: #1A2E48;
  --color-accent-border: #2E4C74;
  --color-error: #F28B82;
  --color-error-soft: #3B1B19;
  --color-error-border: #7A342E;
  --color-warning: #F2B25A;
  --color-warning-soft: #3A2A10;
  --color-warning-border: #7A5A22;
  --color-success: #5FD39A;
  --color-success-soft: #123123;
  --color-success-border: #236B45;
  --color-info: #C0B1F7;
  --color-info-soft: #2A2350;
  --color-info-border: #4E4290;
  --color-locked: #98A0AC;
  --color-locked-soft: #1F242C;
  --color-locked-border: #3E4653;
  --color-backdrop: rgba(0, 0, 0, 0.6);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}