@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/newsreader.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/newsreader-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-sans-italic.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "IBM Plex Sans", Arial, sans-serif;

  --color-paper: light-dark(oklch(97.5% 0.015 78), oklch(17% 0.012 58));
  --color-paper-deep: light-dark(oklch(93% 0.022 76), oklch(22% 0.016 58));
  --color-paper-warm: light-dark(oklch(89% 0.035 70), oklch(31% 0.025 62));
  --color-ink: light-dark(oklch(20% 0.018 54), oklch(91% 0.018 75));
  --color-ink-soft: light-dark(oklch(38% 0.018 53), oklch(76% 0.018 72));
  --color-ink-muted: light-dark(oklch(44% 0.016 55), oklch(66% 0.016 70));
  --color-accent: light-dark(oklch(52% 0.16 35), oklch(72% 0.14 38));
  --color-accent-deep: light-dark(oklch(42% 0.14 34), oklch(67% 0.14 37));
  --color-rain: light-dark(oklch(43% 0.13 238), oklch(74% 0.12 235));
  --color-rule: light-dark(oklch(73% 0.025 64), oklch(40% 0.022 62));
  --color-rule-soft: light-dark(oklch(87% 0.022 70), oklch(26% 0.018 62));
  --color-focus: light-dark(oklch(44% 0.17 244), oklch(78% 0.14 235));
  --color-photo-shadow: light-dark(oklch(20% 0.018 54 / 0.16), oklch(5% 0.01 55 / 0.48));
  --image-filter: saturate(0.84) contrast(1.03);

  --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: 4.5rem;
  --space-9: 6rem;

  --measure: 65ch;
  --measure-narrow: 48ch;
  --page: 70rem;
  --gutter: clamp(1rem, 4vw, 3rem);

  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-lg: 1.16rem;
  --text-xl: clamp(1.7rem, 4vw, 2.65rem);
  --text-display: clamp(3.25rem, 14vw, 8.5rem);

  --rule: 1px;
  --radius-sm: 0.2rem;
  --radius-pill: 999px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --image-filter: brightness(0.82) saturate(0.74) contrast(1.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --image-filter: brightness(0.82) saturate(0.74) contrast(1.06); }
}