/* Minimal luxury (ronde3), gegenereerd uit tokens.json op 2026-09-29.
   NIET met de hand wijzigen: pas tokens.json aan en draai bouw-css.mjs.
   Bron: https://claude.ai/artifact/E1buKUQcpZ2A4nKFFbHXQ5, artboards S-systeem en S-home */

/* letters: de site host ze zelf */

:root {
  --ivory: #F2E8DA; /* de grond, paginabasis */
  --charcoal: #1A1A1A; /* tekst en donkere blokken */
  --goud: #D3B27E; /* het accent, hoogstens een tiende van het vlak */
  --softgray: #F6F6F6; /* kaarten */
  --goldengrey: #5B5B5B; /* bijtekst en labels */
  --tekstgrijs: #454545; /* lopende tekst op ivory */
  --goudbruin: #8A6D39; /* linkhover, cijfers in opsommingen, label scherper */
  --roestlabel: #8A5A4A; /* label bij de oude versie van een zin */
  --ivorydof: #ADA79C; /* bijtekst op charcoal */
  --lijn: rgba(26,26,26,0.16); /* scheidingslijn binnen een blok */
  --lijnsterk: rgba(26,26,26,0.2); /* scheidingslijn tussen secties */
  --lijnzacht: rgba(26,26,26,0.14); /* scheidingslijn binnen een kaart */

  --kop-familie: "Cal Sans", system-ui, sans-serif;
  --tekst-familie: "Manrope", system-ui, sans-serif;

  --maat-kop: 96px;
  --regel-kop: 1;
  --maat-tussenkop: 50px;
  --regel-tussenkop: 1;
  --maat-kaartkop: 24px;
  --regel-kaartkop: 1.24;
  --maat-tekst: 17px;
  --regel-tekst: 1.64;
  --maat-tekstklein: 14px;
  --regel-tekstklein: 1.66;
  --maat-bijtekst: 13px;
  --regel-bijtekst: 1.6;
  --maat-label: 12px;

  --radius-kaart: 24px;
  --radius-knop: 999px;
  --marge: 96px;
  --gat-kaarten: 22px;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--tekst-familie);
  font-size: var(--maat-tekst);
  line-height: var(--regel-tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .kop, .cijfer, blockquote {
  font-family: var(--kop-familie);
  letter-spacing: -0.01em;
  line-height: 1.24;
  font-weight: 400;
}

h1 { font-size: var(--maat-kop); line-height: var(--regel-kop); }
h2 { font-size: var(--maat-tussenkop); line-height: var(--regel-tussenkop); }

p { color: var(--tekstgrijs); }
a { color: var(--charcoal); }
a:hover { color: var(--goudbruin); }

/* Het label in kleine kapitalen: het enige plaatsje waar Manrope 600 klein staat. */
.label {
  font-size: var(--maat-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goldengrey);
}

.kaart {
  background: var(--softgray);
  border-radius: var(--radius-kaart);
  padding: 28px 30px;
  box-shadow: none;
}

.knop {
  display: inline-block;
  border-radius: var(--radius-knop);
  padding: 12px 22px;
  font-weight: 600;
  text-decoration: none;
}
.knop-primair { background: var(--charcoal); color: var(--ivory); }
.knop-secundair { background: var(--goud); color: var(--charcoal); }

hr, .scheiding { border: 0; border-top: 1px solid var(--lijn); }
.scheiding-sterk { border-top: 1px solid var(--lijnsterk); }

/* De korrel over een groot vlak. Zet het ouderelement op position:relative. */
.korrel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("beeld/korrel-180.png");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.7;
}