:root {
  color-scheme: dark;

  --milo-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --milo-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --milo-bg: #0f141a;
  --milo-surface: #151b23;
  --milo-surface-muted: #1f2933;
  --milo-surface-raised: #202a35;
  --milo-text: #e8eef2;
  --milo-text-muted: #9aa8b2;
  --milo-text-subtle: #768692;
  --milo-border: #2b3642;
  --milo-border-strong: #3a4754;

  --milo-ink: #080c10;
  --milo-ink-soft: #111827;
  --milo-accent: #2dd4bf;
  --milo-accent-hover: #5eead4;
  --milo-accent-soft: #134e4a;
  --milo-accent-faint: #102f32;
  --milo-selected-bg: #2dd4bf;
  --milo-selected-text: #071113;
  --milo-blue: #60a5fa;
  --milo-blue-soft: #172b4d;
  --milo-cyan: #67e8f9;
  --milo-indigo: #818cf8;
  --milo-violet: #a78bfa;
  --milo-slate: #94a3b8;
  --milo-amber: #fbbf24;
  --milo-amber-soft: #3a2a0a;
  --milo-danger: #f87171;
  --milo-danger-soft: #3b1114;
  --milo-success: #34d399;
  --milo-success-soft: #0f2e24;

  --milo-chart-1: #2dd4bf;
  --milo-chart-2: #3b82f6;
  --milo-chart-3: #38bdf8;
  --milo-chart-4: #6366f1;
  --milo-chart-5: #14b8a6;
  --milo-chart-6: #60a5fa;
  --milo-chart-7: #8b5cf6;
  --milo-chart-8: #64748b;
  --milo-chart-muted: #24313b;
  --milo-chart-grid: #2b3642;
  --milo-chart-axis: #768692;
  --milo-chart-warning: #f59e0b;
  --milo-chart-danger: #ef4444;

  --milo-radius-xs: 4px;
  --milo-radius-sm: 6px;
  --milo-radius-md: 8px;

  --milo-space-1: 4px;
  --milo-space-2: 8px;
  --milo-space-3: 12px;
  --milo-space-4: 16px;
  --milo-space-5: 20px;
  --milo-space-6: 24px;
  --milo-space-8: 32px;
  --milo-space-10: 40px;
  --milo-space-12: 48px;

  --milo-shadow-sm: 0 1px 2px rgb(0 0 0 / 18%);
  --milo-shadow-focus: 0 0 0 3px rgb(45 212 191 / 32%);

  --milo-topbar-height: 72px;
  --milo-tabs-height: 58px;
  --milo-content-width: 1480px;
  --milo-process-min-block: clamp(520px, 62vh, 760px);
  --milo-preview-min-block: clamp(260px, 44vh, 560px);
  --milo-status-min-block: 44px;
  --milo-suggestion-min-block: 112px;

  --milo-control-height-sm: 34px;
  --milo-control-height: 44px;
  --milo-control-height-lg: 50px;
  --milo-control-radius: var(--milo-radius-sm);
  --milo-container-radius: var(--milo-radius-md);
  --milo-pill-radius: 999px;
  --milo-control-border-width: 1px;
  --milo-control-padding-x: var(--milo-space-3);
  --milo-control-gap: var(--milo-space-2);
  --milo-control-bg: var(--milo-surface);
  --milo-control-bg-hover: var(--milo-surface-raised);
  --milo-control-bg-disabled: var(--milo-surface-muted);
  --milo-control-text: var(--milo-text);
  --milo-control-text-muted: var(--milo-text-muted);
  --milo-control-border: var(--milo-border);
  --milo-control-border-hover: var(--milo-border-strong);
  /* Compatibility aliases for older CI drafts. Prefer --milo-* in new code. */
  --ci-font-sans: var(--milo-font-sans);
  --ci-font-mono: var(--milo-font-mono);
  --ci-bg: var(--milo-bg);
  --ci-surface: var(--milo-surface);
  --ci-surface-muted: var(--milo-surface-muted);
  --ci-surface-raised: var(--milo-surface-raised);
  --ci-text: var(--milo-text);
  --ci-text-muted: var(--milo-text-muted);
  --ci-text-subtle: var(--milo-text-subtle);
  --ci-border: var(--milo-border);
  --ci-border-strong: var(--milo-border-strong);
  --ci-ink: var(--milo-ink);
  --ci-ink-soft: var(--milo-ink-soft);
  --ci-accent: var(--milo-accent);
  --ci-accent-hover: var(--milo-accent-hover);
  --ci-accent-soft: var(--milo-accent-soft);
  --ci-accent-faint: var(--milo-accent-faint);
  --ci-selected-bg: var(--milo-selected-bg);
  --ci-selected-text: var(--milo-selected-text);
  --ci-blue: var(--milo-blue);
  --ci-cyan: var(--milo-cyan);
  --ci-indigo: var(--milo-indigo);
  --ci-violet: var(--milo-violet);
  --ci-slate: var(--milo-slate);
  --ci-amber: var(--milo-amber);
  --ci-rust: var(--milo-amber);
  --ci-danger: var(--milo-danger);
  --ci-chart-1: var(--milo-chart-1);
  --ci-chart-2: var(--milo-chart-2);
  --ci-chart-3: var(--milo-chart-3);
  --ci-chart-4: var(--milo-chart-4);
  --ci-chart-5: var(--milo-chart-5);
  --ci-chart-6: var(--milo-chart-6);
  --ci-chart-7: var(--milo-chart-7);
  --ci-chart-8: var(--milo-chart-8);
  --ci-chart-muted: var(--milo-chart-muted);
  --ci-chart-grid: var(--milo-chart-grid);
  --ci-chart-axis: var(--milo-chart-axis);
  --ci-chart-warning: var(--milo-chart-warning);
  --ci-chart-danger: var(--milo-chart-danger);
  --ci-radius-xs: var(--milo-radius-xs);
  --ci-radius-sm: var(--milo-radius-sm);
  --ci-radius-md: var(--milo-radius-md);
  --ci-space-1: var(--milo-space-1);
  --ci-space-2: var(--milo-space-2);
  --ci-space-3: var(--milo-space-3);
  --ci-space-4: var(--milo-space-4);
  --ci-space-5: var(--milo-space-5);
  --ci-space-6: var(--milo-space-6);
  --ci-space-8: var(--milo-space-8);
  --ci-space-10: var(--milo-space-10);
  --ci-space-12: var(--milo-space-12);
  --ci-shadow-sm: var(--milo-shadow-sm);
  --ci-shadow-focus: var(--milo-shadow-focus);
  --ci-topbar-height: var(--milo-topbar-height);
  --ci-tabs-height: var(--milo-tabs-height);
  --ci-content-width: var(--milo-content-width);
  --ci-process-min-block: var(--milo-process-min-block);
  --ci-preview-min-block: var(--milo-preview-min-block);
  --ci-status-min-block: var(--milo-status-min-block);
  --ci-suggestion-min-block: var(--milo-suggestion-min-block);
  --ci-control-height-sm: var(--milo-control-height-sm);
  --ci-control-height: var(--milo-control-height);
  --ci-control-height-lg: var(--milo-control-height-lg);
  --ci-control-radius: var(--milo-control-radius);
  --ci-container-radius: var(--milo-container-radius);
  --ci-pill-radius: var(--milo-pill-radius);
  --ci-control-border-width: var(--milo-control-border-width);
  --ci-control-padding-x: var(--milo-control-padding-x);
  --ci-control-gap: var(--milo-control-gap);
  --ci-control-bg: var(--milo-control-bg);
  --ci-control-bg-hover: var(--milo-control-bg-hover);
  --ci-control-bg-disabled: var(--milo-control-bg-disabled);
  --ci-control-text: var(--milo-control-text);
  --ci-control-text-muted: var(--milo-control-text-muted);
  --ci-control-border: var(--milo-control-border);
  --ci-control-border-hover: var(--milo-control-border-hover);
}

:root[data-ci-theme="light"],
[data-ci-theme="light"] {
  color-scheme: light;

  --milo-bg: #f4f7f8;
  --milo-surface: #ffffff;
  --milo-surface-muted: #f7fafb;
  --milo-surface-raised: #ffffff;
  --milo-text: #0d1117;
  --milo-text-muted: #60727c;
  --milo-text-subtle: #82919a;
  --milo-border: #dce4e8;
  --milo-border-strong: #b9c8cf;

  --milo-ink: #0d1117;
  --milo-ink-soft: #151b23;
  --milo-accent: #2dd4bf;
  --milo-accent-hover: #14b8a6;
  --milo-accent-soft: #ccfbf1;
  --milo-accent-faint: #effefa;
  --milo-selected-bg: #2dd4bf;
  --milo-selected-text: #0d1117;
  --milo-blue: #3b82f6;
  --milo-blue-soft: #dbeafe;
  --milo-cyan: #38bdf8;
  --milo-indigo: #6366f1;
  --milo-violet: #8b5cf6;
  --milo-slate: #64748b;
  --milo-amber: #a15c00;
  --milo-amber-soft: #fff3d6;
  --milo-danger: #b42318;
  --milo-danger-soft: #fff0ed;
  --milo-success: #0f8a5f;
  --milo-success-soft: #e8f8f0;

  --milo-chart-muted: #e8eef2;
  --milo-chart-grid: #dce4e8;
  --milo-chart-axis: #82919a;
}