:root {
  color-scheme: light;
  --au-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --au-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Primitive palette: cool off-white paper and a blue-black workbench. */
  --au-canvas: #f7f7f8;
  --au-canvas: oklch(0.975 0.003 270);
  --au-surface-1: #ffffff;
  --au-surface-1: oklch(1 0 0);
  --au-surface-2: #f0f0f2;
  --au-surface-2: oklch(0.95 0.004 270);
  --au-surface-3: #e6e6ea;
  --au-surface-3: oklch(0.92 0.005 270);
  --au-ink: #191a1e;
  --au-ink: oklch(0.19 0.012 275);
  --au-ink-muted: #62636b;
  --au-ink-muted: oklch(0.48 0.014 275);
  --au-ink-subtle: #85868d;
  --au-ink-subtle: oklch(0.61 0.012 275);
  --au-border: #e0e0e4;
  --au-border: oklch(0.9 0.005 270);
  --au-border-strong: #c8c8ce;
  --au-border-strong: oklch(0.82 0.008 270);

  --au-accent: #6558d8;
  --au-accent: oklch(0.49 0.19 285);
  --au-accent-hover: #5145c6;
  --au-accent-hover: oklch(0.43 0.18 285);
  --au-accent-soft: #e8e6ff;
  --au-accent-soft: oklch(0.93 0.035 285);
  --au-success: #277b57;
  --au-warning: #9a5a20;
  --au-danger: #b54851;

  --au-on-accent: #ffffff;
  --au-focus: #6558d8;
  --au-focus: oklch(0.49 0.19 285);
  --au-dark-canvas: #0d0e11;
  --au-dark-canvas: oklch(0.135 0.012 275);
  --au-dark-surface-1: #15161a;
  --au-dark-surface-1: oklch(0.17 0.013 275);
  --au-dark-surface-2: #1b1c21;
  --au-dark-surface-2: oklch(0.205 0.015 275);
  --au-dark-surface-3: #222329;
  --au-dark-surface-3: oklch(0.25 0.016 275);
  --au-dark-ink: #f3f4f2;
  --au-dark-ink: oklch(0.96 0.006 95);
  --au-dark-ink-muted: #a3a6ae;
  --au-dark-ink-muted: oklch(0.72 0.014 275);
  --au-dark-border: #303139;
  --au-dark-border: oklch(0.31 0.016 275);
  --au-dark-border-strong: #454751;
  --au-dark-border-strong: oklch(0.4 0.018 275);
  --au-dark-accent: #a39aff;
  --au-dark-accent: oklch(0.72 0.14 285);
  --au-dark-accent-hover: #b8b1ff;
  --au-dark-accent-hover: oklch(0.78 0.12 285);
  --au-dark-accent-soft: #2a2748;
  --au-dark-accent-soft: oklch(0.25 0.055 285);

  /* Semantic layer. Components consume these, never primitives directly. */
  --au-bg: var(--au-canvas);
  --au-surface: var(--au-surface-1);
  --au-surface-muted: var(--au-surface-2);
  --au-surface-hover: var(--au-surface-3);
  --au-fg: var(--au-ink);
  --au-fg-muted: var(--au-ink-muted);
  --au-fg-subtle: var(--au-ink-subtle);
  --au-border-color: var(--au-border);
  --au-border-emphasis: var(--au-border-strong);
  --au-action: var(--au-accent);
  --au-action-hover: var(--au-accent-hover);
  --au-action-soft: var(--au-accent-soft);
  --au-action-fg: var(--au-on-accent);
  --au-focus-ring: 0 0 0 3px color-mix(in srgb, var(--au-focus) 28%, transparent);

  --au-radius-sm: 6px;
  --au-radius-md: 10px;
  --au-radius-lg: 14px;
  --au-radius-xl: 18px;
  --au-radius-pill: 999px;

  --au-space-1: 4px;
  --au-space-2: 8px;
  --au-space-3: 12px;
  --au-space-4: 16px;
  --au-space-5: 20px;
  --au-space-6: 24px;
  --au-space-8: 32px;
  --au-space-12: 48px;
  --au-space-16: 64px;
  --au-space-24: 96px;

  --au-duration-fast: 150ms;
  --au-duration-normal: 220ms;
  --au-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --au-bg: var(--au-dark-canvas);
  --au-surface: var(--au-dark-surface-1);
  --au-surface-muted: var(--au-dark-surface-2);
  --au-surface-hover: var(--au-dark-surface-3);
  --au-fg: var(--au-dark-ink);
  --au-fg-muted: var(--au-dark-ink-muted);
  --au-fg-subtle: #777b85;
  --au-border-color: var(--au-dark-border);
  --au-border-emphasis: var(--au-dark-border-strong);
  --au-action: var(--au-dark-accent);
  --au-action-hover: var(--au-dark-accent-hover);
  --au-action-soft: var(--au-dark-accent-soft);
  --au-action-fg: #111218;
  --au-focus: var(--au-dark-accent);
}

html {
  background: var(--au-bg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: var(--au-action-soft);
  color: var(--au-fg);
}