/* ═══════════════════════════════════════════════════════════════════════
   01_COLORS-AND-TYPOGRAPHY.CSS — Burgerplatform · kleurschema "Regeneratie"
   ───────────────────────────────────────────────────────────────────────
   HET ENIGE bestand met kleurwaarden (hex) EN font-tokens. Alle andere CSS
   gebruikt uitsluitend var(--token). Wisselen van huisstijl = dit bestand
   vervangen (variabele-namen ongewijzigd laten zodat 02-06 blijven werken).

   Herkomst: kleurenpalet gebaseerd op het palet uit "Regeneratie"
   (color-scheme.jpeg). Let op: de hex/RGB-labels in dat plaatje waren deels
   onbetrouwbaar (ongeldige RGB-waarden, kleurnamen die niet bij hun eigen
   swatch pasten) — de waarden hieronder zijn gemeten uit de swatch-pixels
   zelf, niet overgetypt van de labels.

   Ontwerpkeuze: blauw blijft de dominante/primaire kleur (--accent) en
   krijgt een tweede, rijkere marine/indigo-tint voor de CTA-knoppen
   (--accent-warm) — geen groen in de algemene site-chrome. Het volledige
   aardse "Regeneratie"-palet (groen/oker/terracotta) zit verwerkt in de
   --nat-* tokens, die alleen door 06_natuur.css gebruikt worden.

   Opbouw:  1) FONT-TOKENS   2) RUW PALET (--c-*)   3) SEMANTISCH (var())
            4) DARK MODE     5) VORM-TOKENS

   Alle tekst/knop-combinaties zijn getoetst op WCAG AA (contrastberekening,
   geen inschatting op het oog).
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAFIE: zelf-gehoste fonts ─────────────────────────────────
   Voorheen een Google Fonts @import (render-blocking + dataverkeer naar
   Google). Nu zelf gehost: sneller (geen extra DNS/connectie naar
   fonts.googleapis.com/fonts.gstatic.com) en geen third-party requests
   meer. De .woff2-bestanden horen in een map "fonts" naast dit CSS-bestand
   (dus D:\Webfiles\Website\common\cssbase\fonts\*.woff2).

   Let op: het pad in elke url() hieronder ("fonts/...") is relatief ten
   opzichte van de plek waar het GEBUNDELDE CSS-bestand door de server
   wordt aangeboden. Als de bundel op een andere plek/URL terechtkomt dan
   deze map, moet dat pad kloppen met die locatie — dit is niet vanaf hier
   te verifiëren zonder de server-/build-configuratie te zien. */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/lora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alegreya-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/alegreya-sans-700.woff2') format('woff2');
}

:root {
  /* ── 1b. FONT-TOKENS ──────────────────────────────────────────────── */
  --font-heading:        'Lora', Georgia, 'Times New Roman', serif;
  --font-heading-weight: 600;
  --font-body:           'Alegreya Sans', 'DM Sans', system-ui, sans-serif;
  --font-body-weight:    400;

  /* ── 2. RUW PALET ─────────────────────────────────────────────────── */

  /* Blauw = primair/dominant. "Azuur Blauw" uit het Regeneratie-palet. */
  --c-blue-900: #152333;
  --c-blue-800: #3C6794;   /* accent-dk / accent-ink — tekst op licht, AA 5.9:1 */
  --c-blue-700: #4677AC;   /* hoofd-blauw (light) — wit-op-knop, AA 4.67:1 */
  --c-blue-500: #4474A7;
  --c-blue-400: #5686BA;   /* hoofd-blauw (dark) — AA 5.2:1 tegen donkere achtergrond */
  --c-blue-300: #86A7CB;
  --c-blue-100: #E7EDF4;
  --c-blue-050d: #0F1924;

  /* Marine/Indigo = CTA-accent ("--accent-warm"). Bewust een tweede,
     rijkere blauwtint i.p.v. een tweede kleur — zie kanttekening bovenin
     over politieke/merk-positionering: geen groen in de hoofd-chrome. */
  --c-navy-800: #3C57B5;   /* accent-warm-ink / hover-vulling, wit-op-knop AA 6.52:1 */
  --c-navy-700: #546DC6;   /* hoofd CTA-vulling (light) — wit-op-knop AA 4.79:1 */
  --c-navy-400: #697FCD;   /* CTA-vulling (dark) — vereist DÓNKERE tekst, zie --on-warm */
  --c-navy-100: #E3E7F2;
  --c-navy-090d: #0D1226;

  /* RGB-tripletten (nodig voor Bootstrap's --bs-*-rgb variabelen) */
  --c-blue-700-rgb: 70, 119, 172;    /* #4677AC */
  --c-blue-800-rgb: 60, 103, 148;    /* #3C6794 */
  --c-blue-400-rgb: 86, 134, 186;    /* #5686BA */
  --c-navy-700-rgb: 84, 109, 198;    /* #546DC6 */
  --c-ink-900-rgb:  15, 25, 35;      /* #0f1923 — ongewijzigd */
  --c-ink-100-rgb:  240, 242, 244;   /* #f0f2f4 — ongewijzigd */

  /* Natuurtinten — volledige "Regeneratie"-palet, alleen gebruikt door
     06_natuur.css (bewust NIET in de algemene site-chrome, zie bovenin).
     Per kleur: tekst-toon, lichtere dark-toon, zachte tint (light+dark), en
     een vaste vulling voor tegels waar dat aan de orde is. */
  --c-nat-groen:#4A6231;      --c-nat-groen-soft:#819770;   --c-nat-groen-tint:#F0F3ED;  --c-nat-groen-tint-d:#1F2815;
  --c-nat-oker:#9C6C1E;       --c-nat-oker-soft:#DCB87F;    --c-nat-oker-tint:#F5F1EA;   --c-nat-oker-tint-d:#31230C;   --c-nat-oker-fill:#D99D3B;
  --c-nat-terra:#AB6341;      --c-nat-terra-soft:#C18C62;   --c-nat-terra-tint:#F3EEEC;  --c-nat-terra-tint-d:#2B1A12;

  /* Oker-tinten specifiek voor de footer-band (niet hetzelfde als --c-nat-oker
     hierboven, dat is getoetst als TEKST op licht — dit hier is getoetst als
     ACHTERGROND-vulling met witte tekst erop). */
  --c-footer-oker-bg:     #8A5F1B;   /* AA 5.62:1 met wit */
  --c-footer-oker-text:   #EFEAE2;   /* zachte lichte tekst, AA 4.7:1 op --c-footer-oker-bg */
  --c-footer-oker-border: #442F0D;   /* subtiele donkere divider */

  /* Crème — warme sectie-achtergrond (via .bp-section--warm) */
  --c-cream: #F7EEE3;

  /* Neutralen — ongewijzigd t.o.v. het vorige kleurschema */
  --c-ink-900: #0f1923;
  --c-ink-700: #3a4553;
  --c-ink-500: #63707e;    /* "zachte" tekst — AA op wit */
  --c-ink-100: #f0f2f4;
  --c-white:   #ffffff;

  --c-bg-light:      #ffffff;   /* was #f8fafc, kort daarna #F3ECDA (crème) — nu zuiver wit
                                    op verzoek ("net als Google"); --c-cream blijft bestaan
                                    voor losse warme secties (.bp-section--warm), maar is niet
                                    meer de standaard pagina-achtergrond. */
  --c-surface-light: #ffffff;   /* kaarten blijven zuiver wit, voor leesbaarheid */
  --c-border-light:  #E8E0D0;   /* was #dde3ea — warm getint zodat het bij de nieuwe bg past */
  --c-bg-dark:       #0a0a0a;
  --c-surface-dark:  #141414;
  --c-border-dark:   #2a2a2a;
  --c-ink-mid-dark:  #a8b4c0;
  --c-ink-soft-dark: #8a97a5;

  /* Status — ongewijzigd (los van de merk-kleuren, geen reden om aan te passen) */
  --c-green: #1a9c5b;
  --c-red:   #c0392b;
  --c-amber: #d68910;
  --c-slate: #5d6d7e;

  /* ── 3. SEMANTISCHE TOKENS (light) ────────────────────────────────── */
  --accent:      var(--c-blue-700);
  --accent-dk:   var(--c-blue-800);
  --accent-lt:   var(--c-blue-100);
  --accent-ink:  var(--c-blue-800);   /* blauw voor TEKST op licht — AA 5.9:1 */

  --accent-warm:     var(--c-navy-700);
  --accent-warm-ink: var(--c-navy-800);
  --accent-warm-lt:  var(--c-navy-100);
  --on-warm:         var(--c-white);   /* navy-700 is donker genoeg voor witte tekst */
  --signal:          var(--accent-warm-ink);

  --ink:      var(--c-ink-900);
  --ink-mid:  var(--c-ink-700);
  --ink-soft: var(--c-ink-500);

  --bg:           var(--c-bg-light);
  --surface:      var(--c-surface-light);
  --border-color: var(--c-border-light);
  --bg-main:      var(--c-surface-light);
  --text-main:    var(--c-ink-900);
  --card-bg:      #F7F3EC;   /* was #f8f9fa — licht warm getint i.p.v. koel grijs */

  --success: var(--c-green);
  --danger:  var(--c-red);
  --warning: var(--c-amber);

  /* Metric-kleuren (eigen data-viz palet) — ongewijzigd, --bp-com volgt
     automatisch de nieuwe --c-blue-500 mee */
  --bp-fin: var(--c-red);     --bp-fin-lt: #fdf0ef;
  --bp-soc: var(--c-amber);   --bp-soc-lt: #fef9ec;
  --bp-com: var(--c-blue-500);--bp-com-lt: #e8f2f9;
  --bp-esc: var(--c-slate);   --bp-esc-lt: #f0f3f6;

  /* ── FOOTER (semantisch) ────────────────────────────────────────────
     Geschiedenis: was hard gecodeerd (#094a70 e.d.) → eerst een eigen
     donkerblauwe band → daarna wit (zoals Google) toen de pagina-
     achtergrond nog crème was → nu de pagina-achtergrond zelf wit is
     geworden, is de footer bewust weer een kleurband: oker, als warm
     accent tegen het witte canvas (zie --c-footer-oker-* hierboven,
     los getoetst als achtergrond-vulling, niet hergebruikt van --c-nat-oker
     dat voor TEKST is getoetst). */
  --footer-bg:      var(--c-footer-oker-bg);
  --footer-text:    var(--c-footer-oker-text);
  --footer-heading: var(--c-white);
  --footer-border:  var(--c-footer-oker-border);

  /* ── BOOTSTRAP-KOPPELING ──────────────────────────────────────────────
     Overschrijf Bootstrap's eigen variabelen met ONZE tokens, zodat
     Bootstrap-onderdelen (.btn-primary, .text-primary, .bg-primary,
     .border-primary, .link-primary, links, randen) vanzelf onze kleuren
     gebruiken. Zo hoeven we minder zelf te overschrijven en definiëren we
     kleur op één plek. */
  --bs-primary:            var(--accent);
  --bs-primary-rgb:        var(--c-blue-700-rgb);
  --bs-link-color:         var(--accent-ink);
  --bs-link-color-rgb:     var(--c-blue-800-rgb);
  --bs-link-hover-color:   var(--accent-dk);
  --bs-border-color:       var(--border-color);
  --bs-body-color:         var(--ink);
  --bs-body-color-rgb:     var(--c-ink-900-rgb);
  --bs-body-bg:            var(--bg);
  --bs-emphasis-color:     var(--ink);
  --bs-secondary-color:    var(--ink-mid);
  --bs-heading-color:      var(--ink);

  /* ── NATUURTINTEN (semantisch, light) ─────────────────────────────── */
  --nat-groen:  var(--c-nat-groen);   --nat-groen-lt: var(--c-nat-groen-tint);  --nat-groen-solid: var(--c-nat-groen);
  --nat-oker:   var(--c-nat-oker);    --nat-oker-lt:  var(--c-nat-oker-tint);   --nat-oker-solid:  var(--c-nat-oker-fill);
  --nat-terra:  var(--c-nat-terra);   --nat-terra-lt: var(--c-nat-terra-tint);  --nat-terra-solid: var(--c-nat-terra);
  --nat-lucht:  var(--c-blue-800);    --nat-lucht-lt: var(--c-blue-100);        --nat-lucht-solid: var(--c-blue-700);

  /* ── 5. VORM-TOKENS ───────────────────────────────────────────────── */
  --header-h:  80px;
  --radius:    6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09);

  /* Organische ("natuur") hoeken — gebruikt door 06_natuur.css. */
  --radius-organic-sm: 10px 14px 8px 12px;
  --radius-organic-md: 18px 24px 14px 20px;
  --radius-organic-lg: 24px 28px 40px 22px;
}

/* ── 4. DARK MODE ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --accent:    var(--c-blue-400);
    --accent-dk: #759DC7;
    --accent-lt: var(--c-blue-050d);
    --accent-ink: var(--c-blue-400);

    --accent-warm:     var(--c-navy-400);
    --accent-warm-ink: var(--c-navy-400);
    --accent-warm-lt:  var(--c-navy-090d);
    /* navy-400 is te licht voor witte tekst (AA 3.81:1) — hier is DONKERE
       tekst nodig (AA 4.66:1 met --c-ink-900), het omgekeerde van light mode. */
    --on-warm:         var(--c-ink-900);
    --signal:          var(--accent-warm-ink);

    --ink:      var(--c-ink-100);
    --ink-mid:  var(--c-ink-mid-dark);
    --ink-soft: var(--c-ink-soft-dark);

    --bg:           var(--c-bg-dark);
    --surface:      var(--c-surface-dark);
    --border-color: var(--c-border-dark);
    --bg-main:      var(--c-bg-dark);
    --text-main:    var(--c-ink-100);
    --card-bg:      var(--c-surface-dark);

    --bp-fin-lt: #2a1210;
    --bp-soc-lt: #2a1e08;
    --bp-com-lt: #0d2a3d;
    --bp-esc-lt: #1a2030;

    /* Footer weer een eigen kleurband (oker), dus hier WEL weer een
       expliciete dark-mode-versie nodig — hergebruikt de bestaande
       --c-nat-oker-* tinten i.p.v. nieuwe waarden te verzinnen. */
    --footer-bg:      var(--c-nat-oker-tint-d);
    --footer-text:    var(--c-nat-oker-soft);
    --footer-heading: #ffffff;
    --footer-border:  var(--c-nat-oker);

    --bs-body-bg:          var(--c-bg-dark);
    --bs-body-color:       var(--c-ink-100);
    --bs-light-rgb:        10, 10, 10;
    --bs-white-rgb:        20, 20, 20;
    --bs-secondary-rgb:    240, 242, 244;
    --bs-border-color:     var(--c-border-dark);
    --bs-emphasis-color:   #ffffff;
    --bs-heading-color:    #ffffff;
    /* Bootstrap-koppeling in dark */
    --bs-primary:          var(--accent);
    --bs-primary-rgb:      var(--c-blue-400-rgb);
    --bs-link-color:       var(--accent);
    --bs-link-color-rgb:   var(--c-blue-400-rgb);
    --bs-link-hover-color: var(--c-blue-300);
    --bs-body-color-rgb:   var(--c-ink-100-rgb);
    --bs-secondary-color:  var(--c-ink-mid-dark);

    /* Natuurtinten in dark: tekst-tonen lichter, tinten donker. */
    --nat-groen:  var(--c-nat-groen-soft);   --nat-groen-lt: var(--c-nat-groen-tint-d);
    --nat-oker:   var(--c-nat-oker-soft);    --nat-oker-lt:  var(--c-nat-oker-tint-d);
    --nat-terra:  var(--c-nat-terra-soft);   --nat-terra-lt: var(--c-nat-terra-tint-d);
    --nat-lucht:  var(--c-blue-300);         --nat-lucht-lt: var(--c-blue-050d);
    --bs-table-color:          #ffffff;
    --bs-table-striped-color:  #ffffff;
    --bs-table-color-state:    #ffffff;
  }
}