/* Ontwerp-tokens: de enige plek met kleuren en maten. Alleen licht. Alle tekstkleuren minstens 4,5:1 op wit
   en op de achtergrond (gecontroleerd door scripts/controle-ontwerp.mjs). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #f6f6f4;
  --vlak: #ffffff;
  --vlak-2: #ebebe6;
  --lijn: #dadad3;
  --lijn-sterk: #b9b9b1;
  --tekst: #17171a;
  --tekst-2: #55555d;
  --accent: #3049c9;
  --accent-zacht: #d3daf6;
  --goed: #1b7a43;
  --goed-zacht: #e2f1e7;
  --goed-vol: #1f7a47;
  --let-op: #9a4a07;
  --let-op-zacht: #f7e1c6;
  --let-op-vol: #ad520a;
  --slecht: #b42a20;
  --slecht-zacht: #f8dcd8;
  --vriezer-binnen: #e6eef7;
  --kast-binnen: #f2ebdf;
  --kast-rand: #b89f7c;
  --grafiek-punt: #77776f;
  --balk-rest: #dcdcd4;
  --doel-band: #b9c4f0;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-1: 12px;
  --t-2: 14px;
  --t-3: 16px;
  --t-4: 20px;
  --t-5: 26px;
  --t-6: 40px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 40px;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --breed: 560px;
  --tabbalk: 58px;
}