:root {
  color-scheme: dark;

  --ds-surface-canvas: #161b24;
  --ds-surface-default: #1f2632;
  --ds-surface-raised: #2c3445;
  --ds-surface-overlay: #374055;
  --ds-border-subtle: #3b465a;
  --ds-border-default: #556278;
  --ds-border-strong: #718096;

  --ds-text-primary: #f1f5f9;
  --ds-text-secondary: #cbd5e1;
  --ds-text-muted: #a8b3c5;
  --ds-text-on-brand: #17120d;

  --ds-brand: #ed8a3a;
  --ds-brand-hover: #f3a15f;
  --ds-brand-active: #d9772f;
  --ds-info: #7cc4ef;
  --ds-success: #34d399;
  --ds-warning: #fbbf24;
  --ds-danger: #f87171;

  --ds-font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
  --ds-text-xs: 12px;
  --ds-text-sm: 13px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-text-3xl: 32px;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 10px;
  --ds-space-4: 14px;
  --ds-space-6: 20px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;

  --ds-radius-control: 4px;
  --ds-radius-surface: 8px;
  --ds-radius-pill: 999px;
  --ds-control-sm: 28px;
  --ds-control-md: 32px;
  --ds-control-lg: 36px;

  --ds-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.22);
  --ds-shadow-overlay: 0 18px 48px rgba(0, 0, 0, 0.45);
  --ds-focus-ring: 0 0 0 3px rgba(124, 196, 239, 0.35);
  --ds-transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);

  /* Compatibility aliases during the migration. */
  --soc-bg: var(--ds-surface-default);
  --soc-bg2: var(--ds-surface-canvas);
  --soc-panel: var(--ds-surface-raised);
  --soc-panel2: var(--ds-surface-overlay);
  --soc-border: var(--ds-border-subtle);
  --soc-border2: var(--ds-border-default);
  --soc-border3: var(--ds-border-strong);
  --soc-text: var(--ds-text-primary);
  --soc-text2: var(--ds-text-secondary);
  --soc-text3: var(--ds-text-muted);
  --soc-accent: var(--ds-brand);
  --soc-accent-dark: var(--ds-brand-active);
  --soc-accent2: var(--ds-info);
  --success: var(--ds-success);
  --success-light: #86efac;
  --warning: var(--ds-warning);
  --warning-light: #fde68a;
  --danger: var(--ds-danger);
  --danger-light: #fecaca;
  --info: var(--ds-info);
  --info-light: #bae6fd;
  --p1: var(--ds-danger);
  --p1bg: rgba(248, 113, 113, .12);
  --p2: var(--ds-warning);
  --p2bg: rgba(251, 191, 36, .12);
  --p3: #facc15;
  --p3bg: rgba(250, 204, 21, .10);
  --p4: #94a3b8;
  --p4bg: rgba(148, 163, 184, .10);
  --font-sans: var(--ds-font-sans);
  --font-mono: var(--ds-font-mono);
  --soc-font: var(--ds-font-sans);
  --mono: var(--ds-font-mono);
}

#soc-app.light-mode {
  color-scheme: light;
  --ds-surface-canvas: #f5f7fa;
  --ds-surface-default: #eef2f7;
  --ds-surface-raised: #ffffff;
  --ds-surface-overlay: #f8fafc;
  --ds-border-subtle: #d3dae6;
  --ds-border-default: #aeb8c8;
  --ds-border-strong: #697586;
  --ds-text-primary: #171b22;
  --ds-text-secondary: #343b48;
  --ds-text-muted: #5f6b7c;
  --ds-shadow-raised: 0 2px 8px rgba(15, 23, 42, 0.08);
  --ds-shadow-overlay: 0 18px 48px rgba(15, 23, 42, 0.18);
}