/* Design tokens. Every other stylesheet uses these and nothing else. */
:root {
  /* Colour */
  --ink: #141414;
  --paper: #ffffff;
  --surface: #f2f2ef;
  --rule: #dadad6;
  --text-2: #3f3f3f;
  --text-3: #5f5f5f;
  --accent: #b23a1e;
  --accent-on-dark: #f0a48c;
  --book-navy: #13233f;
  --text-on-dark-2: #c8c8c4;
  --rule-on-dark: #3a3a38;

  /* Type */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 1.0625rem; /* 17px */
  --leading: 1.6;
  --text-small: 0.9375rem;
  --text-meta: 0.875rem;
  --text-lead: 1.25rem;
  --text-h3: 1.375rem;
  --text-h2: clamp(1.75rem, 3vw, 2.4rem);
  --text-page-title: clamp(2.4rem, 5vw, 4.1rem);
  --tracking-title: -0.02em;
  --text-essay: 1.25rem; /* 20px */
  --leading-essay: 1.75;
  --text-essay-title: clamp(2.2rem, 4vw, 3.5rem); /* 35px on phones, 56px on desktop */
  --text-essay-h2: clamp(1.75rem, 2.2vw, 1.875rem);
  --text-pull-quote: clamp(1.75rem, 2.8vw, 2.5rem);
  --measure-essay: 680px;
  --measure-essay-header: 820px;
  --measure-text: 640px;

  /* Layout and spacing */
  --content-max: 1200px;
  --gutter: 24px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-section: clamp(4rem, 7.2vw, 6.5rem); /* 64px on phones, 80 to 104px on desktop */

  /* Rules and accents */
  --hairline: 1px solid var(--rule);
  --rule-strong: 1px solid var(--ink);
  --accent-bar-long: 72px;
  --accent-bar-short: 48px;
  --accent-bar-height: 3px;

  /* Depth (used only for the book cover) */
  --shadow-book: 0 18px 40px -12px rgb(20 20 20 / 0.35);

  /* Focus */
  --focus-ring: 3px solid var(--ink);
  --focus-ring-on-dark: 3px solid var(--paper);
  --focus-offset: 3px;
}