/* =============================================================================
   JANSENDEVELOPMENTS DESIGN SYSTEM — BASE
   Versie:  2.3.0
   Docs:    /design-system/README.md
   Rol:     fonts, reset en fundament-gedrag. Gebruikt uitsluitend tokens
            uit tokens.css (laadvolgorde: theme.js → tokens.css → base.css
            → components.css → subdomein-CSS).

   Bewuste principes (lessen uit v1, zie README §8):
   · Een kale <a> erft kleur en heeft NOOIT vanzelf een underline —
     linkstyling komt uitsluitend van expliciete classes. Zo hoeft geen
     enkel component (button-als-link, nav, logo, kaart) zich ooit tegen
     de reset te "verdedigen".
   · Sticky footer zit hier ingebakken: elke pagina met de structuur
     <body><header>…<main>…<footer> doet het automatisch goed.
   · prefers-reduced-motion wordt globaal gerespecteerd.
   ============================================================================= */


/* ── Fonts (zelf gehost — de CSP staat geen externe hosts toe) ─────────────
   Variabele fonts: Fraunces draagt optische maat (9–144) + gewicht 100–900,
   Instrument Sans gewicht 400–700. Paden zijn relatief aan dit bestand en
   werken dus ook bij cross-subdomein laden via de volledige URL. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}


/* ── Reset — VOLLEDIG ──────────────────────────────────────────────────────
   Principe (les uit v1, hier consequent doorgetrokken): geen enkel element
   krijgt "vanzelf" styling van de browser. Elke visuele eigenschap komt
   expliciet uit het design system — een kale <a>, <button> of <input> is
   visueel neutraal totdat een component-class hem aankleedt. Dat betekent
   ook: form-elementen en knoppen ZONDER class zijn bewust onopgemaakt;
   gebruik altijd de componentklassen (fase 2).                             */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;                  /* border-styling werkt pas als een
                                       component een width/kleur zet */
}

html {
  -webkit-text-size-adjust: 100%;   /* iOS: geen autovergroting bij rotatie */
  text-size-adjust: 100%;
  color-scheme: light;              /* juiste native UI (scrollbars, forms) */
  scroll-behavior: smooth;
  tab-size: 2;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  min-height: 100svh;
  display: flex;                    /* sticky footer: main groeit, footer blijft
                                       onderaan — vereist <header><main><footer> */
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--text-body-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);   /* zachte themawissel */
}

main {
  flex: 1 0 auto;
}

/* ── Media: gedraagt zich, loopt nooit uit zijn container ── */
img, picture, video, canvas, svg, iframe, embed, object {
  display: block;
  max-width: 100%;
}
iframe { border: none; }

/* ── Tekst-elementen: geen ingebakken opmaak ── */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* Lange NL-samenstellingen ("Componentbibliotheek") netjes afbreken met
   koppelteken i.p.v. een kale word-break — vereist lang="nl" op <html>. */
h1, h2, h3, h4, h5, h6 { hyphens: auto; }
address, cite, dfn { font-style: inherit; }     /* geen automatische italic */
abbr[title] { text-decoration: none; }           /* geen dotted underline */
mark { background: none; color: inherit; }       /* geen geel highlight */
small { font-size: inherit; }
b, strong { font-weight: 600; }                  /* bewuste waarde i.p.v. UA "bolder" */
sub, sup {                                       /* geen line-height-sprongen */
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }
blockquote, q { quotes: none; }
q::before, q::after { content: none; }

/* Lijsten die als component dienen (nav, kaart-grids) stylen zelf;
   lijsten in lopende tekst krijgen hun markers via een contentclass (fase 2) */
ul, ol { list-style: none; }

/* LES UIT V1: geen enkele automatische linkstyling. Kleur/underline komen
   uitsluitend van expliciete tekststijl-classes (fase 2: .text-link e.d.). */
a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: none;
  border-top: var(--border-thin) solid var(--color-line);
}

/* ── Tabellen ── */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  text-align: inherit;              /* geen automatisch gecentreerde kop */
  font-weight: 600;
}
caption { text-align: inherit; }

/* ── Formulieren & knoppen: volledig neutraal tot een component ze aankleedt ── */
input, button, textarea, select, optgroup {
  font: inherit;                    /* browsers erven typografie niet vanzelf */
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border-radius: 0;
}
button, select, [type="button"], [type="submit"], [type="reset"],
label[for], summary {
  cursor: pointer;
}
button, [type="button"], [type="submit"], [type="reset"], select {
  appearance: none;                 /* geen native knop-/select-chrome */
  -webkit-appearance: none;
}
[type="search"], [type="number"], [type="date"], [type="time"] {
  appearance: none;
  -webkit-appearance: none;
}
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: none; }
textarea { resize: vertical; }      /* wel verstelbaar, nooit horizontaal (breekt layout) */
fieldset { border: none; min-width: 0; }
legend { display: block; }
::placeholder { color: var(--color-text-muted); opacity: 1; }  /* Firefox dimt anders */
:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }

/* ── Interactieve HTML-elementen ── */
summary { list-style: none; }       /* geen driehoek-marker; component tekent zelf */
summary::-webkit-details-marker { display: none; }
dialog {
  border: none;
  padding: 0;
  background: none;
  color: inherit;
  max-width: none;
  max-height: none;
}
progress, meter { appearance: none; -webkit-appearance: none; }


/* ── Basistypografie — kale HTML-elementen krijgen hun tekststijl-tokens.
     Responsive vanzelf: de tokens zelf schakelen bij 768px (tokens.css). ── */
h1 {
  font-family: var(--text-h1-family);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
}
h2 {
  font-family: var(--text-h2-family);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-tracking);
}
h3 {
  font-family: var(--text-h3-family);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}
h4 {
  font-family: var(--text-h4-family);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  font-weight: var(--text-h4-weight);
}

blockquote {
  font-family: var(--text-quote-family);
  font-size: var(--text-quote-size);
  line-height: var(--text-quote-line);
  font-weight: var(--text-quote-weight);
  font-style: var(--text-quote-style);
}

code, kbd, samp, pre {
  font-family: var(--text-code-family);
  font-size: var(--text-code-size);
  line-height: var(--text-code-line);
}

::selection {
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
}


/* ── Focus — toetsenbordnavigatie is een eerste-klas burger.
     :focus-visible: wel bij toetsenbord, niet bij muisklik. ─────────────── */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-s);
}


/* ── Fundament-utilities ──────────────────────────────────────────────────── */

/* Standaard content-container: gecentreerd, met gutter. Varianten voor
   leesbreedte en smalle formulieren. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.container--text   { max-width: var(--container-text); }
.container--narrow { max-width: var(--container-narrow); }

/* Alleen zichtbaar voor screenreaders (labels bij icon-buttons e.d.) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-link voor toetsenbordgebruikers — verplicht als eerste element in
   <body> op elke pagina: <a class="skip-link" href="#main">Naar inhoud</a> */
.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-bg-accent);
  color: var(--color-text-on-accent);
  font-family: var(--text-button-family);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  border-radius: var(--radius-m);
  transform: translateY(calc(-100% - var(--space-s)));
}
.skip-link:focus-visible {
  transform: translateY(0);
}


/* ── Reduced motion — harde toegankelijkheidseis, geldt overal ────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
