/**
 * Design tokens: alle kleuren, fonts en maten op één plek.
 * Gebruik in de regio-CSS altijd var(--…), nooit losse hex-waarden.
 *
 * Breakpoints (in @media kun je geen CSS-variabelen gebruiken, daarom staan ze
 * hier als afspraak):
 *   telefoon        < 600px   basis, geen media query
 *   tablet          ≥ 600px   @media (min-width: 37.5em)
 *   liggende tablet ≥ 900px   @media (min-width: 56.25em)
 *   desktop         ≥ 1200px  @media (min-width: 75em)
 *
 * Verhuurkleuren: groen #9cc64e en bruin, zoals het oude verhuurthema. Waar
 * het www-thema (stjoris) goud en oranje heeft, staat hier groen.
 *
 * Contrast (WCAG AA = 4,5:1 voor gewone tekst), nagerekend:
 *   wit op antraciet 10,3 · groen op antraciet 5,2 · groen-licht op antraciet 7,1
 *   inkt op groen 8,5 · inkt op groen-licht 11,6 · wit op bruin 5,3
 *   bruin op wit 5,3 · link op wit 6,1
 *   NIET gebruiken: wit op groen (2,0), groen op bruin (2,7), en het oude
 *   bruin #a0762c met tekst (4,1; daarom is bruin hier iets donkerder)
 */
:root {
  /* ── Huisstijlkleuren ─────────────────────────────── */
  --c-antraciet: #414041;      /* donkere panelen */
  --c-groen: #9cc64e;          /* accent: knoppen, actief tabblad, lijnen (altijd met donkere tekst) */
  --c-groen-licht: #c5df97;    /* aanwijzen (hover) van groene knoppen */
  --c-bruin: #8a6424;          /* "Lees meer" op antraciet, actief menu-item (met witte tekst / op wit) */
  --c-wit: #ffffff;
  --c-inkt: #1d1d1b;           /* tekst op licht en groen */
  --c-lijn: #d9d6cf;
  --c-rood: #b3261e;           /* waarschuwing ("Let op!", geen verhuur), witte tekst 6,5:1 */
  --c-pagina: #ffffff;         /* paginaachtergrond onder het patroon (zoals origineel) */

  /* ── Rollen (gebruik deze in componenten) ─────────── */
  --c-tekst: var(--c-inkt);
  --c-link: #4d6b1c;           /* donkergroen */
  --c-link-hover: var(--c-inkt);
  --c-focus: #1a73e8;

  /* ── Lettertypen ──────────────────────────────────── */
  --f-kop: "Big John", "Arial Black", system-ui, sans-serif;
  --f-tekst: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tekstgroottes, gelijk aan het oude thema (www.st-joris.nl). */
  --fs-klein: 0.875rem;        /* 14px – kruimelpad, copyright */
  --fs-basis: 0.9375rem;       /* 15px – lopende tekst */
  --fs-menu: 1rem;             /* 16px – hoofdmenu */
  --fs-naam: 0.8125rem;        /* 13px – sitenaam naast het logo */
  --fs-h4: 0.875rem;           /* 14px */
  --fs-h3: 1rem;               /* 16px */
  --fs-h2: 1.125rem;           /* 18px – Catamaran vet (koppen in tekst) */
  --fs-blok: 1.125rem;         /* 18px – Big John (bloktitels: Nieuws, Agenda) */
  --fs-h1: 1.375rem;           /* 22px – Big John (paginatitel) */
  --lh-tekst: 1.6;
  --lh-kop: 1.1;

  /* ── Ruimte ───────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --gutter: 1rem;              /* zijmarge van de pagina */
  --gap: 0.625rem;             /* 10px ruimte tussen panelen (zoals origineel) */
  --paneel-padding: 0.9375rem; /* 15px binnenruimte van een paneel */

  /* ── Overig ───────────────────────────────────────── */
  --max-breedte: 65.3125rem;   /* 1045px, breedte van de inhoud in het origineel */
  --tekst-breedte: 80ch;       /* prettige regellengte */
  --radius: 0;                 /* de huisstijl is hoekig */
  --touch: 2.75rem;            /* 44px: klikdoel op touchscreens */
  --klik: 1.5rem;              /* 24px: minimale klikdoel met muis (WCAG 2.2 AA) */
  --overgang: 150ms ease;
}

/* Op touchscreens en smalle schermen: klikvlakken van 48px, de maat die
   Google (Lighthouse, Website Grader) voor "tap targets" hanteert. */
@media (pointer: coarse), (max-width: 37.49em) {
  :root {
    --touch: 3rem;
  }
}

/* Op touchscreens (telefoon, tablet) altijd grote klikvlakken. */
@media (pointer: coarse) {
  :root {
    --klik: var(--touch);
    --fs-basis: 1rem;          /* 16px: voorkomt inzoomen bij invoervelden op iOS */
    --fs-naam: 0.875rem;       /* 14px: sitenaam leesbaar op kleine schermen */
  }
}