/* assets/brand.css — GEGENEREERD. Niet met de hand wijzigen.
 * Bron: config/brand.json · Generator: api/admin/huisstijl.php · 2026-11-10 21:16 UTC
 * Handmatige wijzigingen hier zijn weg bij het eerstvolgende opslaan in Huisstijl.
 *
 * DRIE BLOKKEN, NIET EEN. De site zet data-theme op basis van prefers-color-scheme.
 * Een enkel :root-blok hier wint van het dark-blok in src/styles.css en sloopt de
 * donkere modus. Daarom: :root (licht), het media-blok achter
 * :root:not([data-theme="light"]) (systeem donker, maar niet als de bezoeker licht
 * koos) en :root[data-theme="dark"] (de bezoeker koos donker).
 */
@import url("fonts/poppins.css");

:root {
  --merk-font-kop: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --merk-font-tekst: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --merk-accent: #E2000F;
  --merk-accent_donker: #A50B00;
  --merk-accent_op_donker: #E2000F;
  --merk-cerise: #E2000F;
  --merk-cerise_donker: #A50B00;
  --merk-inkt: #1A1D21;
  --merk-tekst: #3D444D;
  --merk-gedempt: #696F77;
  --merk-lijn: #E8EAEC;
  --merk-grond: #FFFFFF;
  --merk-vlak: #F6F7F8;
  --merk-paneel: #FFFFFF;
  --merk-op_accent: #FFFFFF;
  --merk-diepblauw: #0E284B;
  --merk-diepblauw_licht: #17396A;
  --merk-nachtblauw: #17396A;
  --merk-status_vrij: #2F7D4F;
  --merk-status_deels: #8A5B00;
  --merk-status_bezet: #8C3A33;
  --merk-radius_kaart: 6px;
  --merk-radius_beeld: 4px;
  --merk-radius_knop: 4px;
  --merk-radius_veld: 4px;
  --merk-ruimte-1: 0.25rem;
  --merk-ruimte-2: 0.5rem;
  --merk-ruimte-3: 0.75rem;
  --merk-ruimte-4: 1rem;
  --merk-ruimte-5: 1.5rem;
  --merk-ruimte-6: 2rem;
  --merk-ruimte-7: 3rem;
  --merk-ruimte-8: 4.5rem;
  --merk-ruimte-9: 7rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --merk-accent: #E2000F;
    --merk-accent_donker: #A50B00;
    --merk-inkt: #F2F5F9;
    --merk-tekst: #CBD3DE;
    --merk-gedempt: #8E99A8;
    --merk-lijn: #28313F;
    --merk-vlak: #161E2C;
    --merk-grond: #0E1420;
    --merk-paneel: #121A26;
  }
}

:root[data-theme="dark"] {
  --merk-accent: #E2000F;
  --merk-accent_donker: #A50B00;
  --merk-inkt: #F2F5F9;
  --merk-tekst: #CBD3DE;
  --merk-gedempt: #8E99A8;
  --merk-lijn: #28313F;
  --merk-vlak: #161E2C;
  --merk-grond: #0E1420;
  --merk-paneel: #121A26;
}

h1 {
  font-family: var(--merk-font-kop);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--merk-inkt);
}
h2 {
  font-family: var(--merk-font-kop);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--merk-inkt);
}
h3 {
  font-family: var(--merk-font-kop);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--merk-inkt);
}
h4 {
  font-family: var(--merk-font-kop);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--merk-inkt);
}
h5 {
  font-family: var(--merk-font-kop);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--merk-inkt);
}
h6 {
  font-family: var(--merk-font-kop);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--merk-gedempt);
  text-transform: uppercase;
}
body, p, li, td {
  font-family: var(--merk-font-tekst);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--merk-tekst);
}
small, .nx-klein, figcaption {
  font-family: var(--merk-font-tekst);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: normal;
  color: var(--merk-gedempt);
}
.eyebrow, .nx-eyebrow, .nx-kaart-categorie {
  font-family: var(--merk-font-tekst);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  color: var(--merk-accent_donker);
  text-transform: uppercase;
}
a {
  font-family: var(--merk-font-tekst);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--merk-accent_donker);
}
.btn, .button, button, .nx-card-knop {
  font-family: var(--merk-font-tekst);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--merk-op_accent);
}