/* ============================================================================
   Voets-Aarts / Tectores design systeem — entrypoint
   ----------------------------------------------------------------------------
   Dit is het ENIGE stylesheet dat een pagina hoeft te laden. Alles wat het
   systeem levert hangt aan de @import-keten hieronder. Voeg je een nieuw
   stylesheet toe aan het systeem, importeer het dan hier — anders bereikt het
   de gerenderde pagina's niet.

   Volgorde is betekenisvol:
     1. fonts    — moet eerst, anders flitst de fallback
     2. tokens   — ruwe waarden
     3. themes   — betekenis per merk, overschrijft niets maar bouwt erop
     4. bundle   — de componentstijlen, die alleen semantische tokens gebruiken
   ========================================================================== */

@import url('./fonts/fonts.css');
@import url('./tokens/tokens.css');
@import url('./tokens/themes.css');
@import url('./_ds_bundle.css');

/* ---------------------------------------------------------------------------
   Basis. Bewust minimaal: dit is geen CSS-reset-bibliotheek, alleen wat nodig
   is om de componenten voorspelbaar te laten landen op een kale pagina.
   --------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ds-surface);
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-body);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--ds-space-4);
  color: var(--ds-heading-color);
  font-family: var(--ds-heading-font, var(--ds-font-sans));
  font-weight: var(--ds-heading-weight);
  letter-spacing: var(--ds-heading-tracking);
  line-height: var(--ds-leading-snug);
  text-wrap: balance;
}

h1 { font-size: var(--ds-text-h1); line-height: var(--ds-leading-tight); }
h2 { font-size: var(--ds-text-h2); }
h3 { font-size: var(--ds-text-h3); }
h4 { font-size: var(--ds-text-h4); }
h5 { font-size: var(--ds-text-h5); }
h6 { font-size: var(--ds-text-h6); }

p {
  margin: 0 0 var(--ds-space-4);
  max-width: var(--ds-measure); /* 65ch; overschrijf bewust, niet per ongeluk */
}

/* Cijfers die onder elkaar kunnen komen te staan, springen niet. */
:where(table, .ds-stat, [data-calc]) { font-variant-numeric: tabular-nums; }

a {
  color: var(--ds-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--ds-duration) var(--ds-ease);
}

a:hover { color: var(--ds-link-hover); }

/* Een component die zijn eigen display zet, wint anders van de display:none
   die de browser aan [hidden] geeft. Zonder deze regel stond de
   succesmelding onder elk formulier permanent open. */
[hidden] { display: none !important; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Eén focusregel voor het hele systeem. Componenten definiëren hem niet zelf
   opnieuw, en verwijderen hem nooit. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ds-focus-width) solid var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
  border-radius: var(--ds-radius-sm);
}

::selection {
  background: var(--ds-accent-2);
  color: var(--ds-color-ink);
}

/* ---------------------------------------------------------------------------
   Beweging beperken voor wie daarom vraagt.

   Twee niveaus, geen schakelaar. "Verminder beweging" betekent niet "geen
   overgang": het betekent geen verplaatsing over afstand en niets dat uit het
   niets tevoorschijn komt. Kleur- en schaduwovergangen bij hover en focus
   blijven, want die maken de interface juist rustiger te volgen.

   De verplaatsingen zelf staan in site.css al achter
   (prefers-reduced-motion: no-preference), dus die komen hier niet eens
   voorbij. Wat hieronder staat is het vangnet voor alles wat dat vergeet.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    /* Let op: transition-duration blijft bewust staan. */
    transition-duration: 120ms !important;
  }
}