/* Self-hosted fonts (SIL Open Font License, see fonts/LICENSES.txt). Latin subset covers German incl. umlauts and ß. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Design tokens (CLAUDE.md section 3). Use only these values in the other stylesheets. */
/* "Editorial hell": paper, ink and one sparing accent. No gradients, no glow, no grain. */
:root {
  --bg:          #f2efe8;   /* paper */
  --surface:     #ebe7de;   /* slightly darker paper for cards and fields */
  --text:        #141414;   /* ink */
  --muted:       #6b6760;   /* graphite, secondary text */
  --line:        #d9d4ca;   /* hairlines */
  --line-strong: #a9a398;   /* drawings, hover borders */
  --accent:      #2338c8;   /* ultramarine – links, active stage, focus. Use sparingly */
  --on-dark:     #f2efe8;   /* text on ink-coloured buttons */

  /* Fallbacks only matter for the moment before the fonts have loaded */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text:    "Geist", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --step-4:  clamp(2.9rem, 1.6rem + 6vw, 6.4rem);

  --space-s:  clamp(.75rem, .7rem + .3vw, 1rem);
  --space-m:  clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-l:  clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --space-xl: clamp(5rem, 3.5rem + 7vw, 10rem);

  --container: 1200px;
  --gutter:    clamp(1rem, .6rem + 2vw, 2.5rem);
  --radius:    4px;
  --header-h:  68px;
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}