/* Design tokens — the whole blog retunes from here */

:root {
  /* Ink & paper palette — warm, slightly yellowed, book-like */
  --paper: oklch(98.5% 0.008 85);
  --paper-deep: oklch(96% 0.014 85);
  --paper-rule: oklch(88% 0.012 85);
  --ink: oklch(20% 0.015 60);
  --ink-soft: oklch(42% 0.018 60);
  --ink-faint: oklch(62% 0.015 60);

  /* One warm accent — an ink that a typesetter might use for marginalia */
  --accent: oklch(48% 0.14 32);
  --accent-deep: oklch(38% 0.15 32);
  --accent-wash: oklch(95% 0.035 55);

  /* Semantic states — quiet, not dashboard-loud */
  --state-draft: oklch(72% 0.11 75);
  --state-published: oklch(52% 0.09 145);
  --state-internal: oklch(45% 0.1 250);

  /* Type families — Alegreya family for body + display, Fira Code for code */
  --font-body: "Alegreya", "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-sc: "Alegreya SC", var(--font-body);
  --font-ui: "Alegreya Sans", var(--font-body);
  --font-code: "Fira Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-drop: "GoudyInitialen", var(--font-body);

  /* Fluid type scale — 1.25 ratio, capped for comfort */
  --type-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.92rem);
  --type-base: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
  --type-lg: clamp(1.22rem, 1.15rem + 0.4vw, 1.45rem);
  --type-xl: clamp(1.55rem, 1.4rem + 0.75vw, 2rem);
  --type-xxl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --type-display: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* Line heights scale inversely with length */
  --lh-tight: 1.18;
  --lh-body: 1.58;
  --lh-loose: 1.7;

  /* 4pt spacing scale — semantic names */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Measure — the single source of truth for column width */
  --measure: 36rem;
  --measure-wide: 48rem;

  /* Rails */
  --rail-left: clamp(2rem, 6vw, 8rem);
  --rail-right: clamp(2rem, 18vw, 16rem);

  /* Transitions */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 220ms;
}

/* Force light — the design is committed, don't flip */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}