:root {
  color-scheme: light;

  --cmg-navy: #0f172a;
  --cmg-slate: #334155;
  --cmg-cyan: #00b8d9;
  --cmg-success: #16a34a;
  --cmg-warning: #f59e0b;
  --cmg-error: #dc2626;
  --cmg-bg: #f8fafc;
  --cmg-surface: #ffffff;
  --cmg-surface-soft: #f3f6fa;
  --cmg-text: #111827;
  --cmg-muted: #6b7280;
  --cmg-border: #e5e7eb;
  --cmg-border-strong: #cbd5e1;

  --cmg-dark-bg: #0b1220;
  --cmg-dark-card: #121a29;
  --cmg-dark-text: #d8dee8;
  --cmg-dark-muted: #94a3b8;
  --cmg-dark-border: rgba(255, 255, 255, 0.08);

  --cmg-font-ui: Inter, "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --cmg-font-data: "IBM Plex Sans", Inter, "Segoe UI", Arial, sans-serif;
  --cmg-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --cmg-text-h1: 40px;
  --cmg-text-h2: 32px;
  --cmg-text-h3: 28px;
  --cmg-text-h4: 24px;
  --cmg-text-section: 20px;
  --cmg-text-body: 16px;
  --cmg-text-small: 14px;
  --cmg-text-table: 14px;
  --cmg-text-caption: 12px;
  --cmg-line-body: 1.5;
  --cmg-line-tight: 1.2;

  --cmg-space-0: 0;
  --cmg-space-1: 4px;
  --cmg-space-2: 8px;
  --cmg-space-3: 16px;
  --cmg-space-4: 24px;
  --cmg-space-5: 32px;
  --cmg-space-6: 48px;
  --cmg-space-7: 64px;
  --cmg-space-8: 96px;

  --cmg-radius-card: 12px;
  --cmg-radius-control: 10px;
  --cmg-radius-modal: 16px;
  --cmg-radius-pill: 999px;

  --cmg-shadow-card: 0 2px 10px rgba(15, 23, 42, 0.06);
  --cmg-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.12);
  --cmg-motion-fast: 150ms;
  --cmg-motion-page: 200ms;

  --cmg-table-head-bg: #f3f6fa;
  --cmg-table-hover: #f8fbfd;
  --cmg-table-selected: rgba(0, 184, 217, 0.08);
  --cmg-table-row-height: 52px;
  --cmg-table-head-height: 48px;
  --cmg-table-cell-y: 12px;
  --cmg-table-cell-x: 16px;

  --cmg-panel-y: 24px;
  --cmg-panel-x: 24px;
  --cmg-grid-gap: 16px;
  --cmg-field-gap: 8px;
  --cmg-input-x: 14px;
  --cmg-button-x: 16px;

  /* Legacy aliases consumed by older screens. */
  --ui-color-ink: var(--cmg-text);
  --ui-color-muted: var(--cmg-muted);
  --ui-color-subtle: #eef8fb;
  --ui-color-surface: var(--cmg-surface);
  --ui-color-surface-soft: var(--cmg-bg);
  --ui-color-line: var(--cmg-border);
  --ui-color-primary: var(--cmg-cyan);
  --ui-color-primary-strong: #0891b2;
  --ui-color-success: var(--cmg-success);
  --ui-color-success-soft: #dcfce7;
  --ui-color-warning: var(--cmg-warning);
  --ui-color-warning-soft: #fef3c7;
  --ui-color-critical: var(--cmg-error);
  --ui-color-critical-soft: #fee2e2;
  --ui-color-info: var(--cmg-cyan);
  --ui-color-info-soft: #e0f7fb;
  --ui-color-neutral: #64748b;
  --ui-color-neutral-soft: #f1f5f9;

  --ui-space-1: var(--cmg-space-1);
  --ui-space-2: var(--cmg-space-2);
  --ui-space-3: 12px;
  --ui-space-4: var(--cmg-space-3);
  --ui-space-5: var(--cmg-space-4);
  --ui-space-6: var(--cmg-space-5);
  --ui-space-7: var(--cmg-space-6);
  --ui-font-family: var(--cmg-font-ui);
  --ui-font-size-xs: 11px;
  --ui-font-size-sm: 12px;
  --ui-font-size-md: 14px;
  --ui-font-size-lg: 18px;
  --ui-font-size-xl: 24px;
  --ui-line-tight: var(--cmg-line-tight);
  --ui-line-body: var(--cmg-line-body);
  --ui-radius-sm: 8px;
  --ui-radius-md: var(--cmg-radius-control);
  --ui-radius-lg: var(--cmg-radius-card);
  --ui-radius-pill: var(--cmg-radius-pill);
  --ui-shadow-sm: var(--cmg-shadow-card);
  --ui-shadow-md: var(--cmg-shadow-hover);
  --ui-motion-tap: 100ms;
  --ui-motion-hover: var(--cmg-motion-fast);
  --ui-motion-modal: var(--cmg-motion-page);
  --ui-motion-page: var(--cmg-motion-page);
}

[data-ui-status="success"] {
  --ui-status-color: var(--cmg-success);
  --ui-status-bg: #dcfce7;
}

[data-ui-status="warning"] {
  --ui-status-color: var(--cmg-warning);
  --ui-status-bg: #fef3c7;
}

[data-ui-status="critical"] {
  --ui-status-color: var(--cmg-error);
  --ui-status-bg: #fee2e2;
}

[data-ui-status="info"] {
  --ui-status-color: var(--cmg-cyan);
  --ui-status-bg: #e0f7fb;
}

[data-ui-status="neutral"] {
  --ui-status-color: #64748b;
  --ui-status-bg: #f1f5f9;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cmg-motion-fast: 0ms;
    --cmg-motion-page: 0ms;
  }
}