/* Komtbinnen design tokens, versie 1.0
   Richting: Hollands nuchter. Eén basis, één accent, twee neutralen. */

@font-face {
  font-family: "Lexend";
  src: url("/fonts/Lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* Kleur */
  --kb-antraciet: #2A2622;   /* basis: tekst, vlakken, logo */
  --kb-amber: #EDAF45;       /* accent: licht, knop, focus op donker */
  --kb-papier: #F7F3EC;      /* neutraal 1: achtergrond */
  --kb-steen: #D9D1C4;       /* neutraal 2: lijnen, toetsen, vlakken */
  --kb-steen-donker: #C4BBAC;/* alleen illustratie: vloer, schaduwvlak */
  --kb-wit: #FFFFFF;         /* alleen invoervelden en wit logo */

  /* Typografie */
  --kb-font-kop: "Lexend", system-ui, sans-serif;
  --kb-font-tekst: "Figtree", system-ui, sans-serif;

  /* Webschaal, ratio 1,25 vanaf 18 px */
  --kb-fs-tekst: 1.125rem;  /* 18 */
  --kb-fs-lead: 1.375rem;   /* 22 */
  --kb-fs-h4: 1.75rem;      /* 28 */
  --kb-fs-h3: 2.1875rem;    /* 35 */
  --kb-fs-h2: 2.75rem;      /* 44 */
  --kb-fs-h1: 3.4375rem;    /* 55 */
  --kb-fs-display: 4.3125rem; /* 69 */
  --kb-fs-klein: 0.9375rem; /* 15 */

  /* Ruimte, basis 8 */
  --kb-r-1: 4px;  --kb-r-2: 8px;  --kb-r-3: 12px; --kb-r-4: 16px;
  --kb-r-5: 24px; --kb-r-6: 32px; --kb-r-7: 48px; --kb-r-8: 64px;
  --kb-r-9: 96px; --kb-r-10: 128px;

  --kb-container: 1200px;
  --kb-lijn: 1px solid var(--kb-steen);
  --kb-lijn-sterk: 2px solid var(--kb-antraciet);

  /* Beweging: rustig, geen vering, geen stuiter */
  --kb-ease: cubic-bezier(.2, 0, 0, 1);       /* binnenkomen */
  --kb-ease-uit: cubic-bezier(.4, 0, 1, 1);   /* weggaan */
  --kb-ease-deur: cubic-bezier(.65, 0, .35, 1);/* deur, licht */
  --kb-duur-kort: 160ms;  /* knop, hover */
  --kb-duur-mid: 320ms;   /* panelen, invoer */
  --kb-duur-lang: 640ms;  /* schermwissel */
  --kb-duur-deur: 1200ms; /* deur gaat open */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kb-duur-kort: 0ms; --kb-duur-mid: 0ms;
    --kb-duur-lang: 0ms; --kb-duur-deur: 0ms;
  }
}