/* Design tokens: color palette (light-dark()), type scale, spacing, radii, layout. */
:root {
  color-scheme: light dark;

  --font-sans:
    'Source Sans 3', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Palette: light-dark() pairs each token (light, dark) */
  /* Keep --color-bg in sync with THEME_BG in src/lib/site.ts, which drives the
     browser-chrome theme-color metas (CSS cannot import those values). */
  --color-bg: light-dark(#fbfaf7, #201f1d);
  --color-fg: light-dark(#181817, #d8d0c3);
  /* Contrast with --color-bg: light ~5.4:1, dark ~6.5:1 (both clear WCAG AA
     4.5:1 for normal text). Darken-on-light / lighten-on-dark slightly from
     the previous values that fell just below threshold. */
  --color-muted: light-dark(#3d3b35, #aaa299);
  --color-link: light-dark(#1e4d5e, #7fa8b7);
  --color-link-hover: light-dark(
    color-mix(in oklch, #1e4d5e 70%, black 30%),
    color-mix(in oklch, #7fa8b7 80%, white 20%)
  );
  --color-accent: light-dark(oklch(55% 0.13 15), oklch(68% 0.11 15));
  --color-rule: light-dark(#bcb5a3, #5a5247);
  --color-rule-medium: light-dark(#7a7466, #70695f);
  --color-rule-strong: light-dark(#4a4340, #aaa196);
  --color-code-bg: light-dark(#efede6, #2a2824);
  --color-callout-bg: light-dark(#f4f1e8, #292723);
  --color-selection-bg: light-dark(#ecddd0, #4a3a2e);

  --theme-switcher-track: var(--color-rule-medium);
  --theme-switcher-icon-light: #f0e2b6;
  --theme-switcher-icon-dark: #d8d0c3;

  /* Typography */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-caption: 0.875rem;
  --fs-base: 1rem;
  --fs-body: 1.1875rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-3xl: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  --fs-dek: clamp(1.08rem, 0.95rem + 0.6vw, 1.25rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-prose: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 700;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Layout */
  --measure: 36rem;
  --measure-wide: 56rem;
  --page: 72rem;
  --gutter: clamp(20px, 4vw, 32px);
}

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

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

@media (max-width: 700px) {
  :root {
    --fs-body: 1.0625rem;
    --fs-dek: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-3xl: 1.75rem;
  }
}
