@import url("tokens.css");

/* Geomini: self-hosted variabel font (SIL OFL, zie fonts/Geomini-OFL.txt).
   Geen echte italic; font-style italic rendert als synthetische oblique. */
@font-face {
  font-family: "Geomini";
  src: url("../fonts/Geomini-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas-licht);
}

/* text-wrap: balance verdeelt een kop over zijn regels in plaats van de laatste
   regel met een los woord te laten eindigen. Dat losse woord is het verschil
   tussen een kop die gezet is en een kop die is afgebroken.
   Grotere display-maten willen strakkere tracking: op 6,5rem oogt -0.02em los. */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: var(--text-hero); font-weight: 660; letter-spacing: -0.032em; }
h2 { font-size: var(--text-h2); font-weight: 620; letter-spacing: -0.024em; }
h3 { letter-spacing: -0.012em; }
/* Geomini is variabel: laat de browser de optische maat meesturen. */
body { font-optical-sizing: auto; }
/* De maatregel geldt voor lopende tekst, niet voor koppen. */
p { text-wrap: pretty; }
p  { max-width: var(--measure); }
img, video { max-width: 100%; height: auto; display: block; }

/* Canvassen */
.canvas-nacht { background: var(--canvas-nacht); color: var(--paper); }
.canvas-paars { background: var(--canvas-paars); color: var(--paper); }
.canvas-licht { background: var(--canvas-licht); color: var(--ink); }

/* Signatuur: een italic accentwoord per heading */
.canvas-nacht :is(h1, h2) em, .canvas-paars :is(h1, h2) em {
  font-style: italic; font-weight: 540; color: var(--accent-lila);
}
.canvas-licht :is(h1, h2) em {
  font-style: italic; font-weight: 540; color: var(--accent-paars);
}

.wrap { width: min(1200px, 100% - 2 * var(--space-inner)); margin-inline: auto; }
section { padding-block: var(--space-section); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}