:root {
  color-scheme: light;

  /* Existing public aliases stay stable while components migrate to semantic tokens. */
  --bg: #f0f4f8;
  --sidebar: #1a2b4a;
  --accent: #2563eb;
  --accent2: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #6c7b91;
  --font-sans: 'Roboto', Arial, Helvetica, sans-serif;

  --ui-surface-page: var(--bg);
  --ui-surface-card: var(--card);
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #f3f7fb;
  --ui-surface-subtle: #f8fafc;
  --ui-surface-hover: #f1f5f9;
  --ui-surface-accent-soft: #eff6ff;
  --ui-surface-accent-muted: #e7f1ff;
  --ui-surface-accent-strong: var(--accent);
  --ui-text: var(--text);
  --ui-text-secondary: #64748b;
  --ui-text-muted: var(--muted);
  --ui-text-placeholder: #94a3b8;
  --ui-text-disabled: #96a3b3;
  --ui-text-inverse: #ffffff;
  --ui-text-accent: #1d4ed8;
  --ui-border: var(--border);
  --ui-border-strong: #cbd5e1;
  --ui-border-accent: #93c5fd;
  --ui-border-accent-soft: #bfdbfe;
  --ui-focus: #93c5fd;
  --ui-focus-ring: rgba(37, 99, 235, .28);

  --ui-success-surface: #e7fbea;
  --ui-success-border: #b7e4c7;
  --ui-success-text: #1f6f3e;
  --ui-success-solid: #22c55e;
  --ui-success-strong: #16a34a;
  --ui-success-glow: rgba(34, 197, 94, .14);

  --ui-warning-surface: #fff4d6;
  --ui-warning-surface-soft: #fffbeb;
  --ui-warning-border: #e5ca84;
  --ui-warning-border-soft: #fde68a;
  --ui-warning-text: #8b5a10;
  --ui-warning-strong: #b45309;
  --ui-warning-solid: #d99a2b;
  --ui-warning-glow: rgba(217, 154, 43, .14);

  --ui-danger-surface: #ffebeb;
  --ui-danger-surface-soft: #fef2f2;
  --ui-danger-border: #e5baba;
  --ui-danger-border-soft: #fecaca;
  --ui-danger-text: #943232;
  --ui-danger-solid: #ef4444;
  --ui-danger-strong: #dc2626;
  --ui-danger-glow: rgba(239, 68, 68, .13);

  --ui-info-surface: #e7f1ff;
  --ui-info-border: #bfd4f0;
  --ui-info-text: #285aa0;
  --ui-info-solid: #38bdf8;
  --ui-info-strong: #0ea5e9;
  --ui-info-glow: rgba(56, 189, 248, .18);

  --ui-overlay-soft: rgba(15, 23, 42, .38);
  --ui-overlay: rgba(15, 23, 42, .5);
  --ui-overlay-strong: rgba(15, 23, 42, .7);

  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 20px;
  --ui-space-6: 24px;
  --ui-space-7: 28px;

  --ui-radius-sm: 7px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 12px;
  --ui-radius-pill: 999px;

  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, .1);
  --ui-shadow-md: 0 8px 24px rgba(15, 23, 42, .12);
  --ui-shadow-lg: 0 18px 48px rgba(15, 23, 42, .22);
  --ui-shadow-modal: 0 20px 60px rgba(15, 23, 42, .2);

  --ui-control-height: 36px;
  --ui-control-height-touch: 44px;
  --ui-control-radius: 8px;
  --ui-font-size-control: .875rem;
  --ui-font-size-control-touch: 1rem;
  --ui-duration-fast: 150ms;

  --z-content: 1;
  --z-sticky: 120;
  --z-header: 320;
  --z-navigation: 360;
  --z-popover: 600;
  --z-modal: 1000;
  --z-modal-nested: 1200;
  --z-context-menu: 1400;
  --z-toast: 1600;

  --page-titlebar-h: 42px;
  --table-toolbar-top: calc(var(--app-header-h) + var(--page-titlebar-h));
}