/* Kendrix design-systeem — tokens
   Bron: huisstijl uit Avada (kendrix.nl, sept 2026) + Linear-principes.
   Donker is de basis. Licht thema via [data-thema="licht"]. */

@font-face { font-family: "Avenir Next Pro"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Light.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/AvenirNextLTPro-It.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Demi.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Bold.woff2") format("woff2"); }
@font-face { font-family: "Avenir Next Pro"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/AvenirNextLTPro-Heavy.woff2") format("woff2"); }

:root {
  color-scheme: dark; /* eigen besturingselementen (datumkiezer, keuzelijst, scrollbalk) volgen het thema */
  /* Merk (uit Avada, ongewijzigd) */
  --kx-geel: #e0c141;
  --kx-navy: #101820;
  --kx-zwart: #040f18;
  --kx-antraciet: #232222;
  --kx-grijs: #585f68;
  --kx-lichtgrijs-1: #f2f3f5;
  --kx-lichtgrijs-2: #f9f9fb;
  --kx-wit: #ffffff;

  /* Semantisch — donker thema (basis). Bijna-zwart met een zweem navy, tekst nooit puur wit. */
  --canvas: #07090c;
  --vlak: #0c0f13;
  --vlak-2: #11151a;
  --vlak-3: #181d23;
  --lijn: rgba(255, 255, 255, 0.07);
  --lijn-sterk: rgba(255, 255, 255, 0.14);
  --tekst: #e6e8eb;
  --tekst-2: #aeb3ba;
  --tekst-3: #7f858d;
  --accent: var(--kx-geel);
  --accent-tekst: var(--kx-zwart);
  --accent-zacht: rgba(224, 193, 65, 0.14);
  --glow: rgba(224, 193, 65, 0.18);
  --glow-wit: rgba(255, 255, 255, 0.08);
  --ok: #4ade80;
  --let-op: #f59e0b;

  /* Typografie */
  --font: "Avenir Next Pro", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tekst-xs: 0.8125rem;
  --tekst-s: 0.9375rem;
  --tekst-m: 1.0625rem;
  --tekst-l: 1.25rem;
  --kop-s: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --kop-m: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --kop-l: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --kop-xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --tracking-kop: -0.028em;
  --lijnhoogte-kop: 1.05;
  --lijnhoogte-tekst: 1.6;

  /* Ritme (4/8-schaal) */
  --r-1: 0.25rem; --r-2: 0.5rem; --r-3: 0.75rem; --r-4: 1rem; --r-5: 1.5rem;
  --r-6: 2rem; --r-7: 3rem; --r-8: 4rem; --r-9: 6rem; --r-10: 8rem;
  --breedte: 72rem;
  --breedte-tekst: 42rem;
  --radius-s: 6px; --radius: 10px; --radius-l: 16px; --radius-xl: 24px;
  --schaduw-venster: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px -30px rgba(0, 0, 0, 0.8);
  --overgang: 160ms cubic-bezier(0.2, 0, 0, 1);
}

[data-thema="licht"] {
  color-scheme: light;
  --canvas: var(--kx-wit);
  --vlak: var(--kx-lichtgrijs-2);
  --vlak-2: var(--kx-lichtgrijs-1);
  --vlak-3: #e9ebee;
  --lijn: rgba(4, 15, 24, 0.09);
  --lijn-sterk: rgba(4, 15, 24, 0.18);
  --tekst: var(--kx-zwart);
  --tekst-2: #3a424b;
  --tekst-3: var(--kx-grijs);
  --accent-zacht: rgba(224, 193, 65, 0.22);
  --glow: rgba(224, 193, 65, 0.35);
  --schaduw-venster: 0 0 0 1px var(--lijn), 0 30px 80px -30px rgba(4, 15, 24, 0.25);
}