:root {
  /* Follows the visitor's system setting until the theme toggle picks one. */
  color-scheme: light dark;

  /* Color: light-dark(light value, dark value) */
  --text-primary: light-dark(#32223d, #f1e7f0);
  --text-muted: light-dark(#625464, #bcadc0);
  --text-on-action: light-dark(#fff, #2a1833);
  --text-accent: light-dark(#88536e, #d9a3c4);
  --heading-accent: light-dark(#a64c63, #f2a0b4);
  --action-accent: light-dark(#bd4d58, #ff9aa2);
  --action-primary: light-dark(#4a2d50, #e6c8ee);
  --action-primary-hover: light-dark(#654469, #f4e0f7);
  --surface-page: light-dark(#fcf8f6, #15101e);
  --surface-raised: light-dark(#fff, #221a2e);
  --surface-feature: light-dark(#ebd9e8, #2a1f37);
  --surface-warm: light-dark(#f3e7e1, #2b1f2a);
  --surface-tint: light-dark(#f1e4ef, #1e162acc);
  --border-soft: light-dark(#d5b8d0, #4a3858);
  --shadow-soft: light-dark(#5135511a, #0006);

  /* Night sky: transparent by day, so the layers only show in dark mode */
  --star: light-dark(transparent, #fff8ec);
  --star-dim: light-dark(transparent, #fff8ec80);
  --nebula-violet: light-dark(transparent, #7b4fa833);
  --nebula-rose: light-dark(transparent, #b8507a24);

  /* Typography */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --leading-body: 1.65;
  --leading-tight: 1.08;
  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-md: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.05rem;
  --text-h1: clamp(3.4rem, 6.4vw, 6rem);
  --text-h2: clamp(2.5rem, 4vw, 3.8rem);
  --text-h3: 2rem;

  /* Shape */
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Layout and spacing */
  --layout-wide: 1120px;
  --layout-narrow: 760px;
  --gutter: 24px;
  --space-section: 92px;
  --space-section-compact: 65px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 90px;
}

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

:root[data-theme="dark"] {
  color-scheme: dark;
}

@media (width <= 480px) {
  :root {
    --gutter: 16px;
    --text-h1: clamp(3rem, 13vw, 4rem);
  }
}