/* tokens/fonts.css */
/* Alle drie families staan onder de SIL Open Font License.
   De live site laadt ze van Google Fonts; zie readme.md > Fonts voor
   de self-host route (/assets/fonts/*.woff2 + @font-face). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Source+Code+Pro:wght@400&display=swap");

/* tokens/colors.css */
/* Eén tint van bijna zwart tot bijna wit, plus één signaalkleur.
   Zekerheid wordt in vorm uitgedrukt, niet in kleur. Geen tweede accent. */
:root {
  /* basiswaarden — namen zoals in kielston.css */
  --inkt:          #0A1B33;
  --inkt-800:      #17253F;
  --blauw:         #13427C; /* Luminous Blue, Coloro 125-28-38 */
  --blauw-diep:    #0D3563;
  --blauw-300:     #99AADD;
  --lijn:          #94A6CE;
  --kaart:         #FDFDFF;
  --krijt:         #F5F7FB;
  --krijt-2:       #E8ECF4;
  --grafiet:       #5A6472;
  --signaal:       #B3261E;
  --signaal-licht: #CF9A22;
  --wit:           #FFFFFF;

  /* semantische aliassen */
  --surface-ground:   var(--krijt);
  --surface-card:     var(--kaart);
  --surface-band:     var(--krijt-2);
  --surface-inverse:  var(--inkt);

  --text-strong:      var(--inkt);
  --text-body:        var(--inkt-800);
  --text-secondary:   var(--grafiet);
  --text-brand:       var(--blauw);
  --text-on-inverse:  var(--krijt);
  --text-meta-inverse: var(--blauw-300);

  --border-hairline:  var(--lijn);
  --border-subtle:    var(--krijt-2);
  --border-strong:    var(--inkt);
  --border-brand:     var(--blauw);

  --action-bg:        var(--blauw);
  --action-bg-hover:  var(--blauw-diep);
  --action-fg:        #FFFFFF;

  --state-conflict:          var(--signaal);
  --state-conflict-inverse:  var(--signaal-licht);
  --focus-ring:              var(--blauw);
}

/* tokens/typography.css */
/* Drie families, drie taken. Kop = Archivo 600, lees = Source Serif 4,
   herkomst/labels/identifiers = Source Code Pro. */
:root {
  --kop:  Archivo, "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --lees: "Source Serif 4", Georgia, serif; /* @kind font */
  --mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, monospace; /* @kind font */

  --font-display: var(--kop);
  --font-body:    var(--lees);
  --font-mono:    var(--mono);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-kop:     600;

  /* koppen — fluïde, letterafstand negatief */
  --size-h1:      clamp(2.25rem, 5.4vw, 3.875rem);
  --size-h2:      clamp(1.75rem, 3.4vw, 2.5rem);
  --size-h2-slot: clamp(1.875rem, 4vw, 2.75rem);
  --size-h3:      1.25rem;
  --size-h3-sm:   1.125rem;
  --size-card-h2: 1.3125rem;

  --tracking-kop:   -0.015em;
  --tracking-h1:    -0.03em;
  --tracking-h2:    -0.025em;
  --tracking-merk:  -0.02em;
  --tracking-label: 0.09em;

  --leading-kop:  1.14;
  --leading-h1:   1.06;
  --leading-h2:   1.1;
  --leading-lees: 1.65;

  /* leestekst */
  --size-body:      1.0625rem;
  --size-lead:      clamp(1.0625rem, 1.6vw, 1.25rem);
  --size-lead-sm:   1.125rem;
  --size-small:     0.9375rem;
  --size-nav:       0.9375rem;

  /* app-schaal — de waarden uit de twee app-schermen, niet afgerond */
  --size-app-titel:   24px;   /* koptitel werklijstdetail */
  --size-app-kop:     21px;   /* koptitel detailpaneel */
  --size-app-lees:    14.5px; /* lezingkaart */
  --size-app-veld:    14px;   /* veldwaarde, knoplabel, tabelnaam */
  --size-app-ui:      13.5px; /* zijbalk, bovenbalkknop */
  --size-app-chip:    12.5px; /* filterchip */
  --size-app-mono:    11px;   /* bronregel, peildatum */
  --size-app-mono-s:  10px;   /* label, teller */
  --size-app-zeker:   9.5px;  /* zekerheid in lijst en paneel */

  /* monospace */
  --size-label:     0.6875rem;
  --size-herkomst:  0.8125rem;
  --size-zekerheid: 0.625rem;
}

/* tokens/spacing.css */
/* Marges zijn ruim en fluïde. Leeg is een geldige uitkomst. */
:root {
  --marge: clamp(20px, 5vw, 72px); /* @kind spacing */  /* horizontale paginamarge */
  --band:  clamp(48px, 8vw, 84px); /* @kind spacing */  /* verticale sectiebandhoogte */
  --breed: 1440px;                  /* max. contentbreedte */

  --gap-1: 5px;
  --gap-2: 12px;
  --gap-3: 14px;
  --gap-4: 18px;
  --gap-5: 22px;
  --gap-6: 26px;
  --gap-7: 32px;
  --gap-hero:    clamp(40px, 6vw, 72px);
  --gap-grid:    clamp(24px, 3vw, 32px);
  --gap-kolom:   clamp(40px, 6vw, 80px);
  --pad-kaart:   28px 30px 30px;
  --pad-paneel:  clamp(26px, 4vw, 40px);
  --sectiekop-mb: clamp(32px, 5vw, 48px); /* @kind spacing */

  --tap-min: 44px;   /* minimale raakvlakhoogte */
  --knop-h:  52px;
}

/* tokens/borders.css */
/* Rechte kanten: geen radius boven 4px, en in de praktijk 0.
   Geen schaduwen, geen gradiënten, geen glow. */
:root {
  --radius: 0;
  --radius-max: 4px;

  --rule-hairline: 1px solid var(--lijn);
  --rule-subtle:   1px solid var(--krijt-2);
  --rule-strong:   3px solid var(--inkt);
  --rule-brand:    3px solid var(--blauw);

  --shadow-none: none;

  --focus-outline: 2px solid var(--blauw);
  --focus-offset:  3px;
}

/* tokens/app.css */
/* Maten van de app. Alles is een veelvoud van 4; er zijn geen tussenmaten.
   Bron: componentenblad §01 en de twee app-schermen (1440 × 900). */
:root {
  --zijbalk:      240px;
  --bovenbalk:    64px;
  --lijstkolom:   420px;  /* werklijst */
  --detailpaneel: 400px;  /* organogram */

  --rij:          40px;   /* tabelrij en zijbalkitem */
  --rij-kop:      36px;   /* tabelkop */
  --knop-compact: 40px;
  --knop-app:     44px;
  --knop-primair: 52px;
  --chip:         32px;   /* filterchip */
  --raakvlak:     44px;

  --pad-paneel:   24px;
  --pad-kaart:    20px;
  --pad-scherm:   28px;

  --icoon:        24px;
  --icoon-nav:    20px;
  --icoon-inline: 16px;
  --icoon-lijn:   1.6; /* @kind other */

  --duur: 120ms; /* @kind other */          /* geen overgang langer dan dit */
}

/* tokens/base.css */
/* Element-defaults, gelijk aan kielston.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--krijt); color: var(--inkt); font: 400 var(--size-body)/var(--leading-lees) var(--lees); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--kop); font-weight: 600; margin: 0; line-height: var(--leading-kop); letter-spacing: var(--tracking-kop); text-wrap: pretty; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--blauw); text-decoration: none; }
a:hover { color: var(--blauw-diep); }
a:focus-visible, button:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
img, svg { display: block; max-width: 100%; }