/* Dutch Architect — design tokens
   Papier & inkt, één signaal: de lichtblauwe punt uit het logo. */

@font-face {
  font-family: "Albert Sans";
  src: url("assets/fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("assets/fonts/red-hat-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Kleur */
  --paper:    #F6F5F1;  /* grond, warm wit */
  --paper-2:  #ECEAE4;  /* secundaire vlakken */
  --ink:      #111214;  /* tekst, logo */
  --ink-2:    #55575C;  /* secundaire tekst — 6,6:1 op --paper */
  --hairline: rgba(17, 18, 20, .12);
  --hairline-strong: rgba(17, 18, 20, .22);
  --dot:      #A1D3E5;  /* gesampled uit het logobestand — alleen signaal/accent, nooit tekst op licht */
  --dot-ink:  #2B6A80;  /* donkere variant voor tekst-accenten — 5,5:1 op --paper */
  --terra:    #D9785B;  /* alleen binnen diagrammen en de lagen-sectie */
  --night:    #0E0F11;  /* donkere secties */
  --night-2:  #17181B;
  --on-night: #F1F0EC;
  --on-night-2: rgba(241, 240, 236, .68);
  --hairline-night: rgba(241, 240, 236, .14);

  /* Typografie — Albert Sans volgt de ronde, lichte letter van het woordmerk;
     Red Hat Mono is de rechtopstaande contrastletter voor data (als de annotaties in hun tekeningen). */
  --font-display: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:  clamp(2.75rem, 8.2vw, 9.5rem);
  --fs-h2:    clamp(2.25rem, 5vw, 5rem);
  --fs-h3:    clamp(1.375rem, 2vw, 1.875rem);
  --fs-lead:  clamp(1.375rem, 2.3vw, 2.125rem);
  --fs-body:  1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .8125rem;

  /* Ruimte — 8px-grid */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px;
  --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 192px;
  --gutter: clamp(16px, 3vw, 40px);
  --section-y: clamp(96px, 12vw, 176px);
  --max: 1600px;
  --header-h: 72px;

  /* Vorm — afgeleid van het woordmerk: rechte stok + ronde kom (d, a, c, e), de boog van de h/n-schouder en de punt.
     Staande beelden krijgen de boog, liggende beelden een ruime ronde hoek, donkere vlakken ronde hoeken, UI is pil. */
  --radius-ui: 999px;
  --radius-card: clamp(16px, 1.8vw, 28px);
  --radius-arch: 999px 999px 0 0;
  --radius-section: clamp(20px, 3vw, 48px);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-ui: 240ms;
  --dur-reveal: 1.1s;
}