/* Overgenomen uit stijl/tokens.css door scripts/bouw-site.ps1.
   Niet met de hand aanpassen: pas de bron aan en draai het script. */
/* Grip op AI — tokens voor het trainingsdeck.
   Met de hand overgenomen uit design-system/tokens/*.css, Nederlandse namen
   voor consumers (zelfde vendor-afspraak als de website: geen submodule).
   Afwijking: de typografieschaal is voor projectie, niet voor leesafstand. */

@font-face{font-family:"Sentient";src:url("fonts/Sentient-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Sentient";src:url("fonts/Sentient-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Sentient";src:url("fonts/Sentient-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Sentient";src:url("fonts/Sentient-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Sentient";src:url("fonts/Sentient-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* navy-as */
  --ink-900:#000814;
  --ink-800:#001d3d;
  --ink-700:#003566;
  --ink-600:#4c7295;
  --ink-500:#7191ad;
  --ink-400:#8ca4ba;
  --ink-300:#b3c2d1;
  --ink-200:#ccd6e0;
  --ink-100:#eaeef2;
  --ink-050:#f5f7f9;
  --wit:#ffffff;

  /* geel */
  --geel-500:#ffc300;
  --geel-400:#ffd60a;
  --geel-100:#fff4cc;

  /* vlakken */
  --vlak-pagina:var(--wit);
  --vlak-verdiept:var(--ink-050);
  --vlak-zacht:var(--ink-100);
  --vlak-invers:var(--ink-800);
  --vlak-invers-diep:var(--ink-900);
  --vlak-accent:var(--geel-500);
  --vlak-accent-zacht:var(--geel-100);

  /* tekst */
  --tekst-kop:var(--ink-900);
  --tekst-body:var(--ink-800);
  --tekst-gedempt:var(--ink-600);
  --tekst-vaag:var(--ink-400);
  --tekst-invers:var(--wit);
  --tekst-invers-gedempt:var(--ink-300);
  --tekst-op-accent:var(--ink-900);

  /* lijnen */
  --lijn-haarlijn:var(--ink-200);
  --lijn-zacht:var(--ink-100);
  --lijn-sterk:var(--ink-800);
  --lijn-accent:var(--geel-500);
  --lijn-invers:rgba(255,255,255,.24);
  --focus-ring:var(--ink-700);
  --focus-ring-invers:var(--geel-400);

  /* font */
  --font:"Sentient","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --licht:300;
  --normaal:400;
  --middel:500;
  --vet:700;

  /* projectieschaal — groter dan de documentschaal van het design system,
     want dit hangt aan een beamer. De clamp-minima maken smal-snappen veilig. */
  --maat-display:clamp(40px,6.2vw,88px);
  --maat-kop:clamp(28px,3.9vw,52px);
  --maat-lead:clamp(20px,2.2vw,30px);
  --maat-body:clamp(17px,1.8vw,25px);
  --maat-klein:clamp(14px,1.2vw,18px);

  --regel-strak:.98;
  --regel-nauw:1.12;
  --regel-kop:1.2;
  --regel-body:1.6;
  --sprong-display:-.022em;
  --sprong-kop:-.01em;
  --sprong-label:.14em;

  /* ruimte */
  --ruimte-1:4px;
  --ruimte-2:8px;
  --ruimte-3:12px;
  --ruimte-4:16px;
  --ruimte-5:24px;
  --ruimte-6:32px;
  --ruimte-7:48px;
  --ruimte-8:64px;
  --ruimte-9:96px;
  --ruimte-10:128px;
  --goot:clamp(24px,4vw,72px);

  /* geometrie — radius overal 0, één afschuining per element */
  --afschuining-s:12px;
  --afschuining-m:20px;
  --afschuining-l:36px;
  --afschuining-xl:64px;
  --knip-rb:polygon(0 0,100% 0,100% calc(100% - var(--afschuining,20px)),calc(100% - var(--afschuining,20px)) 100%,0 100%);
  --knip-rechtsboven:polygon(0 0,calc(100% - var(--afschuining,20px)) 0,100% var(--afschuining,20px),100% 100%,0 100%);
  --schaduw-blok:6px 6px 0 var(--ink-800);
  --schaduw-blok-geel:6px 6px 0 var(--geel-500);
  --schaduw-blok-klein:3px 3px 0 var(--ink-800);

  /* beweging — alles onder 320ms, geen bounce */
  --duur-snel:120ms;
  --duur-basis:200ms;
  --ease-standaard:cubic-bezier(.2,0,.1,1);
  --ease-entree:cubic-bezier(0,.6,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

::selection{background:var(--geel-500);color:var(--tekst-op-accent)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* het enige moment waarop we kapitalen en spatiëring gebruiken */
.etiket{
  font-weight:var(--middel);
  font-size:var(--maat-klein);
  line-height:1.2;
  letter-spacing:var(--sprong-label);
  text-transform:uppercase;
  color:var(--tekst-gedempt);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}