/* Huisstijl Leiders van Dordt: kleuren, letters, maten en beweging. Bron: docs/huisstijl.md (richting "De waaier":
   kleuren uit de Dordtse kleurenwaaier, elf kleuren uit de negentiende eeuw; benaderd van een foto, officiële ACC/NCS-codes nog nazoeken) */

/* Lora voor de koppen (H1 in hoofdletters met extra letterafstand), Hanken Grotesk voor de tekst; beide lokaal */
@font-face { font-family: 'Lora'; src: url('fonts/lora-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('fonts/lora-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }   /* alleen voor de slogan op de home */
@font-face { font-family: 'Lora'; src: url('fonts/lora-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('fonts/lora-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/hanken-grotesk.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Kleur uit de waaier, bewust maar drie: grond oud groen, secundair 59 Joppen blauw (lichte vlakken, footer, reviews), actie 61 Eijk */
  --color-surface:      #424c46;   /* Oud groen uit de kloosterkamer (wens Geert, 2026-10-31), iets donkerder voor leesbare tekst */
  --color-surface-alt:  #505b54;   /* Eén toonstap lichter: fotovlakken terwijl een foto laadt */
  --color-kalk:         #ced2d1;   /* 59 Joppen blauw: het lichte vlak. Grijsblauw, geen crème */
  --color-footer:       #ced2d1;   /* 59 Joppen blauw, de secundaire kleur (wens Geert): footer en reviewband, met donkergroene tekst */
  --color-text:         #eef0ec;   /* Inkt op de donkere grond */
  --color-text-muted:   #b7bec0;   /* 60 Boudin blauw: bijzaken op groen (4,7:1) */
  --color-text-inverse: #1c2115;   /* Inkt op Joppen blauw en op Eijk */
  --color-text-inverse-muted: #4a5340; /* Bijzaak op Joppen blauw (5:1) */
  --color-brand:        #424c46;
  --color-brand-ink:    #eef0ec;   /* Woordmerk op de grond */
  --color-brand-dark:   #363f3a;   /* Dieper groen: het houdertje van de zwevende icoontjes */
  --color-surface-dark: #363f3a;
  --color-accent:       #ba7b36;   /* 61 Eijk als VLAK: de knop, de balk bovenaan, het mailicoontje. Tekst erop: --color-text-inverse (4,7:1) */
  --color-accent-diep:  #74491a;   /* 61 Eijk verdiept, als TEKST op Joppen blauw (5,1:1): de nummers van de vragen */
  --color-accent-ink:   #cdae88;   /* 58 Singel donker als TEKST op groen (4,3:1, alleen grote tekst en lijnen): actief menu-item, actieve stop. Nooit als achtergrond */
  --color-check:        #f3e27a;   /* Markering [CHECK BIJ KLANT]; verdwijnt vóór livegang */

  --color-succes:       #8fbf6a;
  --color-fout:         #ff8a6a;

  /* Letters */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Vijf maten, in verhouding zoals bij Van Steensel Wielersport: tekst 16px, koppen tot 40px, de paginatitel tot 56px */
  --text-klein:   0.875rem;
  --text-basis:   1rem;
  /* De trap van vijf maten (laptop / telefoon): paginatitel 56/30, kop 40/24, subkop en tussenkop 26/21 (ook de zin in de hero),
     groot 20/18, tekst 16 (klein 14). Elke tekst op de site hoort bij één van deze treden */
  --text-intro:   clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);   /* groot: feiten, inleidende zinnen */
  --text-subkop:  clamp(1.3125rem, 1.2rem + 0.5vw, 1.625rem);   /* subkop (cursief) en tussenkop */
  --text-kop:     clamp(1.5rem, 1.1rem + 1.65vw, 2.5rem);
  --text-display: clamp(1.5rem, 8vw, 3.5rem);   /* H1 in hoofdletters; op de telefoon past AUGUSTIJNENHOF zo net binnen de marge */

  --regelafstand-display: 1.02;
  --letterafstand-display: 0.06em;  /* H1: hoofdletters met ruimte tussen de letters */
  --regelafstand-kop: 1.1;
  --letterafstand-kop: -0.005em;
  --regelafstand-tekst: 1.55;
  --regellengte: 60ch;

  /* Ruimte. De inhoud is hooguit 1200px breed (de marge groeit op grote schermen mee);
     de as ligt op 40% daarvan en is de kantlijn: koppen en tekst hangen eraan */
  --marge:         max(48px, calc((100vw - 1200px) / 2));
  --as:            calc(var(--marge) + (100vw - 2 * var(--marge)) * 0.4);
  --kolom:         calc(var(--as) - var(--marge));   /* breedte van de eerste kolom binnen een blok met marges */
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      2rem;
  --space-xl:      4rem;
  --sectie-ruimte: clamp(3rem, 2rem + 2.5vw, 4rem);   /* zoals Van Steensel: 4rem, op de telefoon 3rem */
  --balk-dikte:    12px;      /* De balk in Eijk 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; --text-display: clamp(1.75rem, 7.5vw, 2.25rem); }
}

/* Dark mode: de site is al donker; de lichte vlakken (Joppen blauw) blijven bewust licht */
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-ink:  #eef0ec;
    --color-accent-ink: #cdae88;
    --color-brand-dark: #252c1d;
    --shadow-zwevend: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}