/* GEGENEREERD door huisstijl/kleuren.py -- niet met de hand bewerken.
   Opnieuw maken: python3 huisstijl/kleuren.py --schrijf
   Toetsen:       python3 huisstijl/kleuren.py --controleer
   Bron van de merkkleuren: beeldbank/huisstijl/README.md (18-09-2026). */

/* de letters, lokaal (huisstijl/fonts/, OFL 1.1); gewichten uit demos/stijl.py FONTASSEN */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* merk */
  --merk-navy: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --merk-cyaan: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  /* thema donker (standaard, ook zonder JavaScript) */
  --kleur-grond: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --kleur-vlak-1: oklch(27.215% 0.02303 284.464); /* #252632 */
  --kleur-vlak-2: oklch(31.215% 0.02303 284.464); /* #2f2f3c */
  --kleur-vlak-3: oklch(36.215% 0.02303 284.464); /* #3c3c4a */
  --kleur-inkt: oklch(97.276% 0.00574 264.533); /* #f4f6fa */
  --kleur-inkt-gedempt: oklch(74.000% 0.02000 284.464); /* #a9a9b7 */
  --kleur-accent: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  --kleur-accent-inkt: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --kleur-accent-tekst: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  --kleur-rand: oklch(43.215% 0.02303 284.464); /* #4f4f5d */
  --kleur-rand-sterk: oklch(52.220% 0.02300 284.460); /* #686877 */
  --kleur-focus: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  /* glas: plaat met alpha, dekkende val, gloed (gemeten via kleur.meng) */
  --glas-nav: oklch(27.215% 0.02303 284.464 / 0.92);
  --glas-nav-val: oklch(27.215% 0.02303 284.464);
  --glas-kaart: oklch(27.215% 0.02303 284.464 / 0.82);
  --glas-kaart-val: oklch(27.215% 0.02303 284.464);
  --glas-cta: oklch(27.215% 0.02303 284.464 / 0.90);
  --glas-cta-val: oklch(27.215% 0.02303 284.464);
  --sier-gloed: oklch(73.993% 0.12154 201.689 / 0.22);
  --schaduw-s: 0 1px 2px oklch(0% 0 0 / 0.5);
  --schaduw-m: 0 1px 2px oklch(0% 0 0 / 0.5), 0 12px 32px -12px oklch(0% 0 0 / 0.6);
  /* vast donker: voor een blok dat in beide thema's donker blijft (formulier, color-scheme: dark) */
  --donker-grond: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --donker-vlak-1: oklch(27.215% 0.02303 284.464); /* #252632 */
  --donker-vlak-2: oklch(31.215% 0.02303 284.464); /* #2f2f3c */
  --donker-inkt: oklch(97.276% 0.00574 264.533); /* #f4f6fa */
  --donker-inkt-gedempt: oklch(74.000% 0.02000 284.464); /* #a9a9b7 */
  --donker-accent: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  --donker-accent-inkt: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --donker-accent-tekst: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  --donker-rand: oklch(43.215% 0.02303 284.464); /* #4f4f5d */
  --donker-rand-sterk: oklch(52.220% 0.02300 284.460); /* #686877 */
  --donker-focus: oklch(73.993% 0.12154 201.689); /* #1ec1cb */
  --donker-rand-veld: oklch(55.220% 0.02300 284.460); /* #707180 */
  /* typografie */
  --letter-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --letter-tekst: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tekst-xs: 0.75rem;
  --tekst-s: 0.875rem;
  --tekst-m: 1rem;
  --tekst-l: clamp(1.2rem, 1.143rem + 0.2533vw, 1.333rem);
  --tekst-xl: clamp(1.44rem, 1.296rem + 0.6417vw, 1.777rem);
  --tekst-2xl: clamp(1.728rem, 1.453rem + 1.22vw, 2.369rem);
  --tekst-3xl: clamp(2.074rem, 1.609rem + 2.064vw, 3.157rem);
  --tekst-4xl: clamp(2.488rem, 1.751rem + 3.277vw, 4.209rem);
  --regel-strak: 1.1;
  --regel-tekst: 1.55;
  --gewicht-tekst: 400;
  --gewicht-halfvet: 600;
  --gewicht-vet: 700;
  --spatiering-kop: -0.02em;
  --spatiering-label: 0.06em;
  /* ruimte, maat, radius, beweging */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4rem;
  --ruimte-sectie: clamp(3rem, 1.714rem + 5.714vw, 6rem);
  --maat-tekst: 65ch;
  --maat-pagina: 72rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-l: 1.25rem;
  --radius-rond: 9999px;
  --duur-kort: 150ms;
  --duur: 300ms;
  --curve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-thema="licht"] {
  color-scheme: light;
  --kleur-grond: oklch(98.500% 0.00400 284.464); /* #fafafd */
  --kleur-vlak-1: oklch(96.500% 0.00400 284.464); /* #f3f3f6 */
  --kleur-vlak-2: oklch(94.000% 0.00400 284.464); /* #ebebee */
  --kleur-vlak-3: oklch(90.500% 0.00400 284.464); /* #dfdfe2 */
  --kleur-inkt: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --kleur-inkt-gedempt: oklch(50.000% 0.03000 284.460); /* #616174 */
  --kleur-accent: oklch(61.990% 0.12150 201.690); /* #009ba5 */
  --kleur-accent-inkt: oklch(23.215% 0.02303 284.464); /* #1c1c28 */
  --kleur-accent-tekst: oklch(46.990% 0.12150 201.690); /* #006d77 */
  --kleur-rand: oklch(86.500% 0.00400 284.464); /* #d2d2d5 */
  --kleur-rand-sterk: oklch(65.500% 0.00400 284.460); /* #909093 */
  --kleur-focus: oklch(46.990% 0.12150 201.690); /* #006d77 */
  --glas-nav: oklch(96.500% 0.00400 284.464 / 0.92);
  --glas-nav-val: oklch(96.500% 0.00400 284.464);
  --glas-kaart: oklch(96.500% 0.00400 284.464 / 0.82);
  --glas-kaart-val: oklch(96.500% 0.00400 284.464);
  --glas-cta: oklch(96.500% 0.00400 284.464 / 0.90);
  --glas-cta-val: oklch(96.500% 0.00400 284.464);
  --sier-gloed: oklch(73.993% 0.12154 201.689 / 0.22);
  --schaduw-s: 0 1px 2px oklch(23.215% 0.02303 284.464 / 0.08);
  --schaduw-m: 0 1px 2px oklch(23.215% 0.02303 284.464 / 0.08), 0 12px 32px -12px oklch(23.215% 0.02303 284.464 / 0.18);
}