/* Huisstijl Leiders van Dordt: kleuren, letters, maten en beweging. Bron: docs/huisstijl.md (uitgewerkt uit mockup E, "Het jaarboek") */

/* Eén familie, variabel gewicht 300–800, lokaal gehost */
@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/funnel-display.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleur. De site is van zichzelf donker: havenwater als grond, kalk als licht vlak, signaaloranje als actie */
  --color-surface:      #151a20;   /* Havenwater: blauwzwart, knipoog naar het donkerblauw van Jtro */
  --color-surface-alt:  #20262e;   /* Eén toonstap lichter: tegels en vlakken */
  --color-kalk:         #eef0f2;   /* Kalk: het lichte vlak (tegels, Augustijnen-sectie, footer). Grijswit, geen crème */
  --color-text:         #eef0f2;   /* Inkt op de donkere grond */
  --color-text-muted:   #a4aab2;   /* Alleen bijzaken: bijschrift, bronregel */
  --color-text-inverse: #151a20;   /* Inkt op kalk en op oranje */
  --color-text-inverse-muted: #4f5761; /* Bijzaak op kalk (7:1) */
  --color-brand:        #151a20;
  --color-brand-ink:    #eef0f2;   /* Woordmerk op de grond */
  --color-brand-dark:   #0e1216;   /* Dieper vlak */
  --color-surface-dark: #0e1216;
  --color-accent:       #ff4a1f;   /* Signaaloranje als VLAK: de knop, de balk bovenaan, de tegel met het getal */
  --color-accent-ink:   #ff4a1f;   /* Oranje als TEKST alleen op donker (5,3:1). Nooit op kalk (2,9:1) */
  --color-check:        #f3e27a;

  /* Schetskaart van de route: land, water en straten in tonen van de grond */
  --kaart-land:   #20262e;
  --kaart-water:  #0b0f13;
  --kaart-straat: #2d353f;   /* Markering [CHECK BIJ KLANT]; verdwijnt vóór livegang */

  --color-succes:       #3fbf7a;
  --color-fout:         #ff6b5a;

  /* Letters */
  --font-display: 'Funnel Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Funnel Display', 'Helvetica Neue', Arial, sans-serif;

  /* Vijf maten, ver uit elkaar */
  --text-klein:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --text-basis:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-intro:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-kop:     clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --text-display: clamp(3.25rem, 0.5rem + 8.2vw, 9.5rem);
  --text-monument: clamp(4.5rem, 12vw, 13rem);   /* De grote getallen en de naam in de footer */

  --regelafstand-display: 0.92;
  --letterafstand-display: -0.045em;
  --regelafstand-kop: 1;
  --letterafstand-kop: -0.03em;
  --regelafstand-tekst: 1.5;
  --regellengte: 60ch;

  /* Ruimte. De as op 42% is de kantlijn van het jaarboek: koppen en tekst hangen eraan */
  --as:            42vw;
  --marge:         48px;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      2rem;
  --space-xl:      4rem;
  --sectie-ruimte: clamp(5rem, 2rem + 9vw, 10rem);
  --balk-dikte:    12px;      /* De oranje balk bovenaan elke pagina */

  /* Vorm: hoekig, één keer besloten */
  --radius-knop: 0;
  --shadow-zwevend: 0 12px 32px rgb(0 0 0 / 0.5);

  /* Beweging */
  --curve-uit:    cubic-bezier(0.22, 1, 0.36, 1);
  --curve-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --curve-in-uit: cubic-bezier(0.76, 0, 0.24, 1);
  --curve-zacht:  cubic-bezier(0.33, 1, 0.68, 1);
  --duur-druk:    140ms;
  --duur-hover:   180ms;
  --duur-ui:      320ms;
  --duur-onthul:  800ms;
  --duur-open:    1200ms;
  --vertraging-item: 70ms;
}

@media (max-width: 47.99em) {
  :root { --as: 20px; --marge: 20px; }
}

/* Dark mode: de site is al donker. Alleen de schaduw wordt dieper; de lichte vlakken (kalk) blijven bewust licht */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-ink:  #eef0f2;
    --color-accent-ink: #ff4a1f;
    --color-brand-dark: #0e1216;
    --shadow-zwevend: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}