:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-bg: oklch(1 0 0);
  --color-ink: #000000;
  --color-ink: oklch(0 0 0);
  --color-ink-muted: #626870;
  --color-ink-muted: oklch(0.5 0.012 250);
  --color-line: #e9e7e2;
  --color-line: oklch(0.925 0.005 90);
  --color-accent: #023d90;
  --color-accent: oklch(0.38 0.15 262);
  --color-img-bg: #f3f2ef;
  --color-img-bg: oklch(0.96 0.004 90);

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --text-display-size: clamp(3.25rem, 9vw, 7rem);
  --text-display-leading: 0.98;
  --text-display-tracking: -0.025em;
  --text-title-size: clamp(2.25rem, 5.5vw, 4rem);
  --text-title-leading: 1.05;
  --text-h2-size: 1.75rem;
  --text-h2-leading: 1.2;
  --text-h3-size: 1.3125rem;
  --text-h3-leading: 1.3;
  --text-body-size: 1.0625rem;
  --text-body-leading: 1.65;
  --text-meta-size: 0.875rem;
  --text-meta-leading: 1.5;

  --weight-serif-regular: 400;
  --weight-serif-medium: 500;
  --weight-sans-regular: 400;
  --weight-sans-medium: 500;

  --measure: 62ch;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;

  --space-section: clamp(8rem, 18vw, 15rem);
  --space-page-top: clamp(5rem, 10vw, 8rem);
  --space-page-bottom: clamp(6rem, 12vw, 10rem);

  --grid-cols: 8;
  --grid-gap: 1rem;
  --page-max: 77.5rem;
  --page-margin: clamp(1rem, 4vw, 3rem);

  --line-width: 1px;
  --line-width-strong: 2px;
  --radius-img: 4px;
  --dur-quick: 150ms;
  --ease: cubic-bezier(0.3, 0.7, 0.4, 1);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
}

@media (max-width: 767px) {
  :root {
    --grid-cols: 4;
  }
}