/* tool/web/stijl/basis.css
   Tokens, fonts en reset. Vocabulaire afgekeken uit demo/declaratie-cockpit.html
   (ONTWERP-TOOL.md paragraaf 3.3): dezelfde kleurnamen, dezelfde schaduw en
   radius, zodat het scherm van de tool en de demo uit dezelfde familie komen.
   De fonts zelf staan hier niet base64 in: build-web.mjs trekt ze uit de demo
   en schrijft ze als losse .woff2-bestanden naar dist/tool/fonts/. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/fraunces.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/inter.woff2) format('woff2');
}

:root {
  --cacao: #3A2519;
  --inkt: #2A1D16;
  --inkt-zacht: #6B5748;
  --papier: #FAF7F2;
  --vlak: #FFFFFF;
  --haarlijn: #EBE3D8;

  --turquoise: #3EBFD3;
  --turquoise-tekst: #1E93A6;
  --turquoise-vlak: #E3F7FA;

  --goudbeige: #B99B6B;
  --goudbeige-tekst: #6F5D40;
  --goudbeige-vlak: #F7F3ED;

  --aandacht: #9A5B12;
  --aandacht-vlak: #FBF1E1;
  --blokkerend: #8E2F2A;
  --blokkerend-vlak: #FBEAE8;
  --goedgekeurd: #4A6B4F;
  --goedgekeurd-vlak: #EAF1EA;

  --azul: #0d004c;
  --azul-vlak: #E9E7F2;

  --schaduw: 0 1px 2px rgba(43, 29, 20, 0.06), 0 6px 18px rgba(43, 29, 20, 0.07);
  --radius: 16px;
  --radius-klein: 10px;

  --sidenav-breedte: 232px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--papier);
  color: var(--inkt);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, .fraunces {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--cacao);
  margin: 0;
}

p { margin: 0 0 8px; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
button { font-family: inherit; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

table { font-variant-numeric: tabular-nums; }

/* Basisregel voor toetsenbordfocus; individuele componenten mogen dit
   verfijnen maar nooit weglaten (toegankelijkheid). */
:focus-visible {
  outline: 2px solid var(--turquoise-tekst);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}