:root {
  --color-base: #ebf3fd;
  --color-elevation: #f0f6fe;
  --color-text: #04162b;
  --color-text-muted: #3a5374;
  --color-components: #042954;
  --color-components-alt: #c3ddfd;
  --color-accent: #0369df;
  --color-accent-contrast: #fafcff;
  --color-border: rgba(4, 41, 84, 0.18);
  --color-border-strong: rgba(4, 41, 84, 0.42);
  --color-focus: #0369df;
  --color-black: #0e1219;
  --color-white: #fafcff;

  --gradient-headline: linear-gradient(45deg, var(--color-accent) 0%, var(--color-text) 90%);

  --font-mono: "Office Code Pro", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "Random Grotesque Standard", "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.375rem;
  --fs-600: 1.75rem;
  --fs-700: 2.25rem;
  --fs-800: 3rem;
  --fs-900: 4rem;

  --line-tight: 1.15;
  --line-snug: 1.3;
  --line-body: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --radius-3: 0.75rem;
  --radius-pill: 999rem;

  --shadow-1: 0 0.0625rem 0.125rem rgba(4, 22, 43, 0.06);
  --shadow-2: 0 0.5rem 1.5rem rgba(4, 22, 43, 0.08);

  --content-width: 44rem;
  --wide-width: 64rem;

  --motion-fast: 120ms;
  --motion-med: 220ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --color-base: #040c16;
  --color-elevation: #0c141e;
  --color-text: #d6e9fd;
  --color-text-muted: #8aa3c2;
  --color-components: #c3ddfd;
  --color-components-alt: #042954;
  --color-accent: #0375fb;
  --color-accent-contrast: #fafcff;
  --color-border: rgba(214, 233, 253, 0.16);
  --color-border-strong: rgba(214, 233, 253, 0.36);
  --color-focus: #0375fb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-base: #040c16;
    --color-elevation: #0c141e;
    --color-text: #d6e9fd;
    --color-text-muted: #8aa3c2;
    --color-components: #c3ddfd;
    --color-components-alt: #042954;
    --color-accent: #0375fb;
    --color-accent-contrast: #fafcff;
    --color-border: rgba(214, 233, 253, 0.16);
    --color-border-strong: rgba(214, 233, 253, 0.36);
    --color-focus: #0375fb;
  }
}

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