:root {
  color-scheme: light dark;

  --color-bg:           #fbfbfa;
  --color-surface:      #ffffff;
  --color-surface-2:    #f3f3f1;
  --color-fg:           #1a1a1a;
  --color-fg-muted:     #555555;
  --color-fg-subtle:    #8a8a8a;
  --color-border:       #e4e4e0;
  --color-accent:       #1f5fbf;
  --color-accent-fg:    #ffffff;
  --color-accent-soft:  #e6efff;
  --color-danger:       #b53935;
  --color-success:      #2e7d32;
  --color-warning:      #b26a00;
  --color-code-bg:      #f5f5f3;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;

  --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-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);

  --measure-narrow: 38rem;
  --measure-prose:  46rem;
  --measure-wide:   72rem;
  --measure-fluid:  90rem;

  --bp-phone:  640px;
  --bp-tablet: 900px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:          #111113;
    --color-surface:     #18181b;
    --color-surface-2:   #1f1f23;
    --color-fg:          #f3f3f3;
    --color-fg-muted:    #b4b4b4;
    --color-fg-subtle:   #6b6b6b;
    --color-border:      #2a2a30;
    --color-accent:      #7aa7ff;
    --color-accent-fg:   #0c1220;
    --color-accent-soft: #1b2740;
    --color-code-bg:     #1c1c20;
  }
}