:root {
  color-scheme: dark;

  /* Brand and semantic color system. */
  --color-canvas: #07090e;
  --color-canvas-raised: #090c13;
  --color-surface-1: #0c1018;
  --color-surface-2: #101620;
  --color-surface-3: #161d29;
  --color-surface-glass: rgba(12, 16, 24, 0.82);
  --color-control: #0a0e16;
  --color-code: #080b12;
  --color-text: #f4f5f8;
  --color-text-soft: #c8ceda;
  --color-text-muted: #8d97a8;
  --color-text-faint: #687284;
  --color-border: rgba(226, 232, 255, 0.09);
  --color-border-strong: rgba(226, 232, 255, 0.16);
  --color-border-hover: rgba(177, 151, 252, 0.34);
  --color-brand: #8c63f4;
  --color-brand-strong: #9d7aff;
  --color-brand-soft: rgba(140, 99, 244, 0.12);
  --color-accent: #4fd9ee;
  --color-accent-soft: rgba(79, 217, 238, 0.1);
  --color-success: #47d7ae;
  --color-warning: #e7b85f;
  --color-danger: #f06f88;
  --color-info: #7e9cff;
  --color-focus: #67e8f9;

  /* Concise aliases used by feature-level styles. */
  --bg: var(--color-canvas);
  --bg-2: var(--color-canvas-raised);
  --surface: var(--color-surface-1);
  --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --surface-solid: var(--color-surface-1);
  --surface-elevated: rgba(14, 19, 29, 0.96);
  --surface-muted: rgba(255, 255, 255, 0.032);
  --surface-hover: rgba(255, 255, 255, 0.058);
  --control: var(--color-control);
  --code-bg: var(--color-code);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --text: var(--color-text);
  --text-soft: var(--color-text-soft);
  --muted: var(--color-text-muted);
  --muted-2: var(--color-text-faint);
  --accent: var(--color-brand);
  --accent-2: #b8a1ff;
  --accent-soft: var(--color-brand-soft);
  --cyan: var(--color-accent);
  --cyan-soft: var(--color-accent-soft);
  --success: var(--color-success);
  --warn: var(--color-warning);
  --danger: var(--color-danger);

  /* Typography. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --tracking-tight: -0.045em;
  --tracking-heading: -0.032em;
  --tracking-label: 0.15em;

  /* Four-pixel spacing rhythm. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Geometry. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius: var(--radius-lg);
  --control-height-sm: 36px;
  --control-height: 44px;
  --control-height-lg: 52px;
  --content: 1200px;
  --content-reading: 760px;
  --marketing-content: 1180px;
  --app-sidebar: 248px;

  /* Elevation deliberately stays restrained. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 24px 70px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 36px 100px rgba(0, 0, 0, 0.46);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-sm);
  --accent-shadow: 0 0 0 1px rgba(140, 99, 244, 0.12), 0 18px 52px rgba(67, 39, 132, 0.16);
  --glow-brand: 0 0 28px rgba(140, 99, 244, 0.16);
  --glow-accent: 0 0 22px rgba(79, 217, 238, 0.12);

  /* One motion language for the entire product. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 100ms;
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --duration-slow: 600ms;
  --duration-reveal: 760ms;

  /* Layering. */
  --z-backdrop: 0;
  --z-content: 1;
  --z-sticky: 30;
  --z-drawer: 60;
  --z-popover: 80;
  --z-modal: 100;
  --z-toast: 120;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-canvas: #f5f7fb;
  --color-canvas-raised: #edf2f8;
  --color-surface-1: #ffffff;
  --color-surface-2: #f7f9fc;
  --color-surface-3: #e8edf5;
  --color-surface-glass: rgba(250, 252, 255, 0.86);
  --color-control: #fbfcfe;
  --color-code: #0d111b;
  --color-text: #151925;
  --color-text-soft: #353d4e;
  --color-text-muted: #687386;
  --color-text-faint: #8790a0;
  --color-border: rgba(41, 53, 77, 0.12);
  --color-border-strong: rgba(41, 53, 77, 0.2);
  --color-border-hover: rgba(105, 76, 198, 0.32);
  --color-brand: #7354d5;
  --color-brand-strong: #6644cb;
  --color-brand-soft: rgba(115, 84, 213, 0.09);
  --color-accent: #087f99;
  --color-accent-soft: rgba(8, 127, 153, 0.08);
  --color-success: #117c64;
  --color-warning: #8d5d12;
  --color-danger: #bc3e57;
  --color-info: #466bd1;
  --color-focus: #087f99;
  --surface-elevated: rgba(255, 255, 255, 0.97);
  --surface-muted: rgba(47, 60, 88, 0.04);
  --surface-hover: rgba(47, 60, 88, 0.07);
  --accent-2: #795bd9;
  --shadow-xs: 0 1px 2px rgba(36, 48, 70, 0.08);
  --shadow-sm: 0 12px 32px rgba(55, 67, 93, 0.08);
  --shadow-md: 0 24px 70px rgba(55, 67, 93, 0.12);
  --shadow-lg: 0 36px 100px rgba(55, 67, 93, 0.16);
  --accent-shadow: 0 0 0 1px rgba(115, 84, 213, 0.09), 0 18px 48px rgba(83, 62, 148, 0.08);
  --glow-brand: 0 0 24px rgba(115, 84, 213, 0.08);
  --glow-accent: 0 0 18px rgba(8, 127, 153, 0.06);
}