/* jboumans.nl design tokens. Colours are copied verbatim from the spec, section 2, and its
   "Adjustments during Plan 1" (four highlighters and a red pen, Joram's review of 12 October 2026).
   --rule, --tape and the highlighters (--highlight, --hl-*) are never text colours; the red pen is
   text only on white paper (4.96:1) and decoration everywhere else (tests/site/test_tokens.py). */
@font-face {
  font-family: "Shantell Sans";
  src: url("../assets/fonts/shantell-sans-latin-infm-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FFFEF9;
  --paper-edge: #F3EFE4;
  --rule: #D5E3F4;
  --ink: #1D3B8F;
  --ink-deep: #132862;
  --graphite: #4A4A4A;
  --highlight: #FFE45C;
  --hl-pink: #FF9BCF;
  --hl-green: #A6EB8F;
  --hl-orange: #FFB45C;
  --red-pen: #D62828;
  --tape: rgb(255 228 92 / 0.55);
  --shadow: 0 1px 0 rgb(19 40 98 / 0.08), 0 8px 18px rgb(19 40 98 / 0.12);

  --font-hand: "Shantell Sans", "Segoe Print", "Comic Sans MS", cursive;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --infm-display: "INFM" 100;
  --infm-label: "INFM" 40;

  --step--1: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --step-0: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.5rem + 1vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
  --step-4: clamp(2.8rem, 2.1rem + 3.4vw, 4.6rem);

  --line: 2rem;
  --margin-x: clamp(1rem, 7vw, 6.5rem);
  --gutter: 1rem;
  --wrap: 70rem;
  --section-y: clamp(3rem, 7vw, 6.5rem);
  --tilt: 1.5deg;
  --ease: cubic-bezier(0.3, 0.7, 0.2, 1);
}