/* ===========================================================
   Kéola Toisuta — brand tokens
   Bron: moodboard 2025 + logo-SVG's + logo-PNG (#300708)
   Vastgelegd 2026-08-21. Waarheidsbron voor ALLE bouwwerk.
   =========================================================== */
:root {
  /* --- kleuren --- */
  --kt-rood:   #300708;  /* PRIMAIR. Logo + alle tekst. Vervangt het oude bruin #412F2D (vervallen 2026-08). */
  --kt-beige:  #a58775;  /* ACHTERGROND (Kéola's favoriet) + vlakken, kaders */
  --kt-blauw:  #95b3bf;  /* accent — vlakken, badges, illustratie */
  --kt-cream:  #efe6db;  /* lichte achtergrond, secties, kaarten */
  --kt-wit:    #ffffff;  /* HOOFDACHTERGROND */
  --kt-zwart:  #000000;  /* HOOFDTEKSTKLEUR — gemeten: 61x op haar live site */

  /* --- semantisch (gebruik DEZE in componenten, niet de ruwe kleuren) --- */
  --kt-bg:            var(--kt-wit);     /* GECORRIGEERD 2026-08-21 door Kéola: wit is de hoofdachtergrond */
  --kt-bg-alt:        var(--kt-cream);   /* tweede achtergrond, rustsecties */
  --kt-bg-invers:     var(--kt-rood);
  --kt-tekst:         var(--kt-zwart);  /* GECORRIGEERD: zwart op wit (21:1) / op cream (17:1) ✅ */
  --kt-tekst-invers:  var(--kt-wit);    /* 18.11:1 op rood   ✅ */
  --kt-lijn:          rgba(0,0,0,.14);
  --kt-accent:        var(--kt-blauw);

  /* Knop — blauw vlak, ZWARTE tekst. 12/12 knoppen op haar site zijn zo. */
  --kt-knop-bg:       var(--kt-blauw);
  --kt-knop-tekst:    var(--kt-zwart);   /* 9.5:1 ✅  — wit op blauw is 2.2 ⛔ nooit */

  /* --- typografie --- */
  --kt-font-display: "Seriously Nostalgic", Georgia, "Times New Roman", serif;
  --kt-font-body:    "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;  /* bevestigd Kéola 2026-08-21 */

  --kt-tracking-display: 0.01em;
  --kt-leading-display:  1.08;
  --kt-leading-body:     1.6;

  /* --- ruimte (4px-schaal) --- */
  --kt-s1: .25rem; --kt-s2: .5rem;  --kt-s3: .75rem; --kt-s4: 1rem;
  --kt-s6: 1.5rem; --kt-s8: 2rem;   --kt-s12: 3rem;  --kt-s16: 4rem; --kt-s24: 6rem;

  --kt-radius: 0;          /* het merk is rechthoekig/klassiek — geen ronde hoeken tenzij besloten */
  --kt-maxw:   68rem;
}

/* --- webfonts --- */
/* Open Sans via Google Fonts — in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
   (of self-hosted woff2 — sneller, geen third-party request, beter voor AVG) */
@font-face {
  font-family: "Seriously Nostalgic";
  src: url("/fonts/SeriouslyNostalgic-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Seriously Nostalgic";
  src: url("/fonts/SeriouslyNostalgicItal-Reg.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Seriously Nostalgic Cond";
  src: url("/fonts/SeriouslyNostalgic-Condensed.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- basis --- */
html { color-scheme: light; }
body {
  background: var(--kt-bg);
  color: var(--kt-tekst);
  font-family: var(--kt-font-body);
  line-height: var(--kt-leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .kt-display {
  font-family: var(--kt-font-display);
  font-weight: 400;
  line-height: var(--kt-leading-display);
  letter-spacing: var(--kt-tracking-display);
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
p  { max-width: 62ch; }

/* --- knoppen --- */
.kt-btn {
  display: inline-block; padding: var(--kt-s4) var(--kt-s8);
  background: var(--kt-rood); color: var(--kt-wit);
  font-family: var(--kt-font-body); font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--kt-rood); border-radius: var(--kt-radius);
  transition: background .2s ease, color .2s ease;
}
.kt-btn:hover  { background: transparent; color: var(--kt-rood); }
.kt-btn:focus-visible { outline: 2px solid var(--kt-rood); outline-offset: 3px; }
.kt-btn--secundair { background: transparent; color: var(--kt-rood); }
.kt-btn--secundair:hover { background: var(--kt-rood); color: var(--kt-wit); }

/* ⛔ VERBODEN VOOR TEKST (WCAG-fail — geverifieerd, niet geschat)
   blauw op beige 1.50 · blauw op cream 1.79 · cream op beige 2.69 · wit op beige 3.32 (alleen groot)
   ✅ WEL veilig: rood op beige 5.45 · rood op cream 14.67 · rood op blauw 8.17
                  wit op rood 18.11 · cream op rood 14.67 · blauw op rood 8.17
   Regel: TEKST is rood (of licht op rood). Blauw is een VLAK/VORM, nooit een letter.
   Blauw op beige mag wel als vorm/vlak/illustratie — daar telt contrast niet als leesbaarheid. */


/* ── ONTWERPTAAL (Kéola 2026-08-21) ─────────────────────────────────────────
   Wit = hoofdachtergrond · cream = tweede · rood = heel blok met witte tekst
   Zwart = tekst · blauw = knop (altijd zwarte letters) · beige = detail, geen vlak
   Rechte hoeken, geen schaduwen, foto's tot de rand, elk blok wisselt van karakter.
   Volledige uitleg + blok-ritme: store/brand/ontwerptaal.md
   ⛔ VERVALLEN: beige achtergrond met rode tekst — dat was mijn aanname, niet haar stijl.
   ────────────────────────────────────────────────────────────────────────── */