/*
  tokens.css — ParoPlus designtokens
  Bindend: tokennamen komen exact overeen met het contract (scratch-contract.md).
  Laadvolgorde: tokens.css → fonts.css → base.css → components.css

  Structuur (verplicht):
    1. :root                                                        → licht thema (standaard)
    2. @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) → systeem-donker
    3. :root[data-theme="dark"]                                     → handmatig gekozen donker
  Blok 2 en 3 bevatten identieke waarden; alleen de selector verschilt
  (systeemvoorkeur versus expliciete data-theme keuze, zie main.js).

  Contrastcontrole (WCAG): elk tekst/achtergrond-paar uit de semantische
  groep is nagerekend (relatieve luminantie, WCAG 2.x-formule). Normale
  tekst ≥ 4.5:1, grote tekst (≥24px of ≥18.7px vet) ≥ 3:1. Afwijkingen van
  de brontabel in het contract staan hieronder per bijstelling toegelicht.
*/

:root {
  /* ── Semantisch: oppervlakken, tekst, randen (licht thema) ── */
  --color-surface: #ffffff;
  --color-surface-alt: #eef3f4;
  --color-ink: #16232b;              /* ink op surface: 16.04:1, op surface-alt: 14.33:1 */
  --color-body: #40525c;             /* body op surface: 8.14:1, op surface-alt: 7.27:1 */

  /* Bijstelling: --color-muted #62757e → #5c6e77.
     #62757e op --color-surface-alt (#eef3f4) gaf 4.30:1 (< 4.5:1, faalt).
     #5c6e77 geeft 5.31:1 op surface en 4.75:1 op surface-alt — beide ≥ 4.5:1. */
  --color-muted: #5c6e77;

  --color-line: #e3e9eb;

  /* ── Semantisch: merk ── */
  --color-brand: #3AA2B2;
  --color-brand-strong: #2b7d8a;     /* hover; als tekst op wit: 4.77:1 */

  /* Bijstelling (al voorgeschreven in contract): --color-brand-text #217886
     i.p.v. #3AA2B2, want #3AA2B2 als tekst op wit is te licht (3.00:1).
     #217886 geeft 5.13:1 op surface en 4.58:1 op surface-alt — beide ≥ 4.5:1. */
  --color-brand-text: #217886;

  --color-accent-green: #3AB585;
  --color-accent-blue: #3A69B7;

  /* Tekst op brand-strong-vlakken (knoppen). Thema-ONafhankelijk en dus
     alleen hier gedefinieerd: de vlakkleur (--color-brand-strong) wisselt
     niet mee met het thema, de tekst mag dat dan ook niet doen —
     --color-surface werd in donker thema bijna zwart op teal (3.76:1,
     faalt AA; audit stint 3). Wit op #2b7d8a: 4.77:1. */
  --color-on-brand: #ffffff;

  /* Foutmelding formulier: #b3261e op --color-surface geeft 6.54:1,
     op --color-surface-alt geeft 5.84:1 — beide ≥ 4.5:1. */
  --color-error: #b3261e;

  /* ── Semantisch: formulier & placeholders ── */
  --color-input-bg: #ffffff;

  /* Bijstelling (audit): --color-input-border #ccd8db → #74888f.
     #ccd8db gaf slechts 1.46:1 op wit en 1.30:1 op surface-alt — de rand is
     de enige visuele afbakening van invoervelden en de ghost-knop, en moet
     ≥ 3:1 halen (WCAG 1.4.11). #74888f geeft 3.71:1 op surface en 3.31:1
     op surface-alt. */
  --color-input-border: #74888f;

  --color-placeholder-bg: #dbe4e6;

  /* Bijstelling: --color-placeholder-text #5c7078 → #526470.
     #5c7078 op --color-placeholder-bg (#dbe4e6) gaf 4.02:1 (< 4.5:1, faalt).
     #526470 geeft 4.76:1 op placeholder-bg — ≥ 4.5:1. */
  --color-placeholder-text: #526470;

  /* ── Semantisch: header & focus ── */
  --header-bg: rgba(255, 255, 255, 0.92);

  /* Bijstelling (audit): focus-ring in --color-brand gaf 2.68:1 op
     surface-alt (< 3:1, WCAG 1.4.11). --color-brand-strong geeft 4.77:1
     op surface en 4.26:1 op surface-alt. In het donkere thema haalt
     --color-brand zelf ruim voldoende (≥ 5.3:1) en blijft die in gebruik. */
  --focus-ring: 2px solid var(--color-brand-strong);

  /* ── Donkere sectie (Tandvleesziekten §04) + footer — stabiel in BEIDE thema's ── */
  --dark-bg: #16232b;
  --dark-ink: #f2f6f7;               /* op dark-bg: 14.74:1 */
  --dark-body: #b8c8cf;              /* op dark-bg: 9.32:1 */
  --dark-muted: #a9bcc4;             /* op dark-bg: 8.15:1 */
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-panel: rgba(255, 255, 255, 0.05);
  --dark-accent: #56c3a0;            /* op dark-bg: 7.42:1 */

  /* Gecontroleerd: #8ea3ac op --dark-bg geeft 6.10:1 (≥ 4.5:1) — geen
     bijstelling nodig, alleen hernoemd naar een eigen footer-token. */
  --dark-footer-text: #8ea3ac;

  /* ── Typografie ── */
  --font-display: 'Jost', sans-serif;
  --font-text: 'Karla', system-ui, sans-serif;
  --text-hero: clamp(2.375rem, 5.4vw, 4.125rem);
  --text-h2: clamp(1.875rem, 3.4vw, 2.75rem);
  --text-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-card-title: 1.25rem;
  --text-stat: 1.875rem;
  --text-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-card: 1rem;
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;
  --text-fine: 0.875rem;
  --text-accent-title: 1.3125rem;    /* koppen accentblokken (§03) */
  --text-contact: 1.125rem;          /* contactgegevens (§05) */
  --text-success-title: 1.625rem;    /* kop succes-melding formulier */

  /* ── Decoratie ── */
  /* Streeppatroon-overlay van de foto-placeholders; bewust gelijk in
     beide thema's zodat het patroon herkenbaar blijft. */
  --placeholder-overlay: rgba(255, 255, 255, 0.6);

  /* ── Layout & vorm ── */
  --container-max: 73.75rem;
  --space-gutter: clamp(1.25rem, 5vw, 3rem);
  --space-section: clamp(3.5rem, 8vw, 6.875rem);
  --space-section-sm: clamp(1.75rem, 3vw, 2.5rem);
  --gap-grid: clamp(2rem, 5vw, 4.5rem);
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* ── Beschikbaarheidskalender (§05, stint 3) ──
     "Vrij" hergebruikt --color-accent-green (#3AB585) als vlak — die kleur
     blijft, net als de andere accentkleuren hierboven, bewust gelijk in
     beide thema's. Wit als cijfertekst (zoals in het designbestand) haalt
     op dat groen maar ~2.7:1 (faalt AA); daarom donkere inkttekst:
     --color-agenda-cel-fg (#16232b) op #3AB585 geeft 6.21:1, op de
     "deels vrij"-kleur hieronder (#9ecfd6) geeft dezelfde tekst 9.43:1 —
     beide ruim boven 4.5:1, in beide thema's (de vlakken zelf wisselen
     niet mee met het thema, dus de tekstkleur hoeft dat ook niet). */
  --color-agenda-deels-bg: #9ecfd6;
  --color-agenda-cel-fg: #16232b;

  /* Bijstelling t.o.v. het designscript: dat gebruikt de inset-ring in
     --color-ink voor de geselecteerde cel. --color-ink wisselt van kleur
     per thema (donker thema: bijna wit), maar de "vrij"/"deels"-vlakken
     hierboven blijven zelf altijd hetzelfde groen/cyaan. Een lichte ring
     (donker thema se --color-ink) op #3AB585 zou maar 2.33:1 halen (faalt
     3:1, WCAG 1.4.11). Daarom een eigen, thema-onafhankelijke ringkleur
     gelijk aan --color-agenda-cel-fg: die haalt in beide thema's dezelfde
     6.21:1 / 9.43:1 als hierboven. */
  --color-agenda-ring: #16232b;
}

/* ── Donker thema: systeemvoorkeur (geen expliciete lichte keuze) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #0f181e;
    --color-surface-alt: #16232b;
    --color-ink: #eef4f6;            /* op surface: 16.16:1, op surface-alt: 14.44:1 */
    --color-body: #b8c8cf;           /* op surface: 10.43:1, op surface-alt: 9.32:1 */
    --color-muted: #93a7af;          /* op surface: 7.17:1, op surface-alt: 6.41:1 */
    --color-line: rgba(255, 255, 255, 0.14);

    --color-brand: #3AA2B2;
    --color-brand-strong: #2b7d8a;

    /* Lichtere brand-text in donker thema (contract-suggestie #5fc0cf).
       Op surface (#0f181e): 8.49:1, op surface-alt (#16232b): 7.58:1. */
    --color-brand-text: #5fc0cf;

    --color-accent-green: #3AB585;
    --color-accent-blue: #3A69B7;

    /* Foutmelding formulier (donker thema): #ff6b6b op --color-surface
       geeft 6.47:1, op --color-surface-alt geeft 5.78:1 — beide ≥ 4.5:1. */
    --color-error: #ff6b6b;

    --color-input-bg: #101c23;

    /* Bijstelling (audit): #3a4c55 gaf 1.93:1 op de donkere input-bg.
       #6b7f89 geeft 4.14:1 op input-bg en 3.84:1 op surface-alt (≥ 3:1). */
    --color-input-border: #6b7f89;

    --color-placeholder-bg: #1d2b33;

    /* Bijstelling: placeholder-tekst krijgt een eigen donkere waarde;
       de lichte #526470 zou op de donkere placeholder-bg maar 2.36:1 halen.
       #93a7af (zelfde als --color-muted hier) geeft 5.80:1 op #1d2b33. */
    --color-placeholder-text: #93a7af;

    /* Gedempte streep-overlay: wit op 60% zou in het donkere thema feller
       zijn dan de achtergrond en de placeholder-tekst onleesbaar maken. */
    --placeholder-overlay: rgba(255, 255, 255, 0.07);

    --header-bg: rgba(15, 24, 30, 0.92);
    --focus-ring: 2px solid var(--color-brand);

    /* Donkere sectie + footer: identiek aan licht thema, zie :root */
    --dark-bg: #16232b;
    --dark-ink: #f2f6f7;
    --dark-body: #b8c8cf;
    --dark-muted: #a9bcc4;
    --dark-line: rgba(255, 255, 255, 0.14);
    --dark-panel: rgba(255, 255, 255, 0.05);
    --dark-accent: #56c3a0;
    --dark-footer-text: #8ea3ac;

    /* Agendakleuren: bewust identiek aan :root, zie toelichting daar —
       de vlakken (accent-green / deels-bg) en hun tekst-/ringkleur
       wisselen niet mee met het thema. */
    --color-agenda-deels-bg: #9ecfd6;
    --color-agenda-cel-fg: #16232b;
    --color-agenda-ring: #16232b;
  }
}

/* ── Donker thema: handmatige keuze via data-theme="dark" (zelfde waarden als hierboven) ── */
:root[data-theme="dark"] {
  --color-surface: #0f181e;
  --color-surface-alt: #16232b;
  --color-ink: #eef4f6;
  --color-body: #b8c8cf;
  --color-muted: #93a7af;
  --color-line: rgba(255, 255, 255, 0.14);

  --color-brand: #3AA2B2;
  --color-brand-strong: #2b7d8a;
  --color-brand-text: #5fc0cf;

  --color-accent-green: #3AB585;
  --color-accent-blue: #3A69B7;

  /* Foutmelding formulier (donker thema): #ff6b6b op --color-surface
     geeft 6.47:1, op --color-surface-alt geeft 5.78:1 — beide ≥ 4.5:1. */
  --color-error: #ff6b6b;

  --color-input-bg: #101c23;
  --color-input-border: #6b7f89;
  --color-placeholder-bg: #1d2b33;
  --color-placeholder-text: #93a7af;
  --placeholder-overlay: rgba(255, 255, 255, 0.07);

  --header-bg: rgba(15, 24, 30, 0.92);
  --focus-ring: 2px solid var(--color-brand);

  /* Donkere sectie + footer: identiek aan licht thema, zie :root */
  --dark-bg: #16232b;
  --dark-ink: #f2f6f7;
  --dark-body: #b8c8cf;
  --dark-muted: #a9bcc4;
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-panel: rgba(255, 255, 255, 0.05);
  --dark-accent: #56c3a0;
  --dark-footer-text: #8ea3ac;

  /* Agendakleuren: bewust identiek aan :root en aan het systeem-donkere
     blok hierboven, zie toelichting bij :root. */
  --color-agenda-deels-bg: #9ecfd6;
  --color-agenda-cel-fg: #16232b;
  --color-agenda-ring: #16232b;
}