/* Donkere modus: de site volgt de systeeminstelling (prefers-color-scheme). De basiskleuren staan in site.css;
   hier alles wat in het licht een vaste kleur heeft (witte kaartjes, pastelvlakken, donkergrijze tekst).
   Laadt na de andere stylesheets. Controleer na een nieuwe sectie: node tools/donker-check.mjs */
@media (prefers-color-scheme: dark) {
  /* Pastelpalet: dezelfde tinten, maar diep */
  :root:not([data-theme="light"]) { --p-lilac: linear-gradient(140deg, #231d4a, #1a2850); --p-peach: linear-gradient(140deg, #43261c, #43202f);
    --p-mint: linear-gradient(140deg, #123a2a, #23391b); --p-sand: linear-gradient(140deg, #3f3414, #42291a);
    --p-pink: linear-gradient(140deg, #43202f, #2f2045); --p-blue: linear-gradient(140deg, #0e2f5c, #154a86); --glow: rgba(255, 255, 255, .06); }

  /* Homepage, hero: het blauwe vlak met de Melo-kaart */
  :root:not([data-theme="light"]) .m-art { background: radial-gradient(60% 70% at 20% 15%, rgba(108, 184, 255, .16), transparent 60%),
    radial-gradient(60% 60% at 85% 90%, rgba(48, 209, 160, .1), transparent 60%), linear-gradient(140deg, #0d2c55, #0f3f74 55%, #0f4b52); }
  :root:not([data-theme="light"]) .m-onpill, :root:not([data-theme="light"]) .pd-noacc,
  :root:not([data-theme="light"]) .pd-form b, :root:not([data-theme="light"]) .c3.me .c3-chips em { background: rgba(48, 209, 88, .16); color: #30d158; }
  :root:not([data-theme="light"]) .hv-ai { background: #1c1c1e; }
  :root:not([data-theme="light"]) .hv-bar i { background: #3a3a3c; }
  :root:not([data-theme="light"]) .hv-input { box-shadow: none; }
  :root:not([data-theme="light"]) .hv-note { background: #2c2c2e; box-shadow: 0 16px 44px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .hv-note p { color: #d1d1d6; }
  :root:not([data-theme="light"]) .hv-note-b span { background: #3a3a3c; }
  :root:not([data-theme="light"]) .hv-note-b .hv-protect { background: #f5f5f7; color: #000; }

  /* Homepage: drie kaarten (op je apparaat, geen account, open source) */
  :root:not([data-theme="light"]) .pd-card p, :root:not([data-theme="light"]) .c3 li, :root:not([data-theme="light"]) .who-card p,
  :root:not([data-theme="light"]) .art-body p, :root:not([data-theme="light"]) .art-body li,
  :root:not([data-theme="light"]) .art-table td, :root:not([data-theme="light"]) .rv-q { color: #d1d1d6; }
  :root:not([data-theme="light"]) .pd-screen { background: #1c1c1e; border-color: #3a3a3c; }
  :root:not([data-theme="light"]) .pd-base { background: #48484a; }
  :root:not([data-theme="light"]) .pd-lock { background: rgba(48, 209, 88, .16); }
  :root:not([data-theme="light"]) .pd-lock svg { stroke: #30d158; }
  :root:not([data-theme="light"]) .pd-chat, :root:not([data-theme="light"]) .pd-form { background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .pd-msg-u { background: #2c2c2e; }
  :root:not([data-theme="light"]) .pd-msg-a, :root:not([data-theme="light"]) .pd-field { background: #3a3a3c; }

  /* Homepage: Melo, tijdelijke chat, gewone chat */
  :root:not([data-theme="light"]) .c3.me, :root:not([data-theme="light"]) .who-maker { background: linear-gradient(160deg, #0e2f5c 0%, #154a86 100%); }
  :root:not([data-theme="light"]) .c3.me .c3-k { color: rgba(235, 235, 245, .7); }
  :root:not([data-theme="light"]) .c3.me .c3-node:first-child .c3-tile svg { stroke: #000; }
  :root:not([data-theme="light"]) .c3-path::before { border-color: #48484a; }
  :root:not([data-theme="light"]) .c3-path.cut::before { border-color: #2c2c2e; }
  :root:not([data-theme="light"]) .c3-path b { background: #1c1c1e; box-shadow: 0 0 0 2px #3a3a3c; color: #ff9f0a; }
  :root:not([data-theme="light"]) .c3-chips em { background: rgba(255, 159, 10, .16); color: #ffb340; }
  :root:not([data-theme="light"]) .c3 li svg.ok { stroke: #30d158; }
  :root:not([data-theme="light"]) .c3 li svg.no { stroke: #ff9f0a; }

  /* Homepage: Business-kaart (in het licht een zwart vlak met witte tekst) */
  :root:not([data-theme="light"]) .teams-card { background: #1c1c1e; color: #f5f5f7; }
  :root:not([data-theme="light"]) .teams-card h2, :root:not([data-theme="light"]) .teams-card .m-more { color: #f5f5f7; }

  /* Nieuws: kaartjes en artikelbeelden */
  :root:not([data-theme="light"]) .nw-art { color: #f5f5f7; }
  :root:not([data-theme="light"]) .art-hero, :root:not([data-theme="light"]) .art-shot { background: radial-gradient(90% 80% at 80% 15%, var(--glow), transparent 60%), var(--p-lilac); }
  :root:not([data-theme="light"]) .nw-art.a1, :root:not([data-theme="light"]) .art-hero--blue { background: radial-gradient(90% 80% at 20% 15%, var(--glow), transparent 60%), var(--p-blue); }
  :root:not([data-theme="light"]) .nw-art.a2, :root:not([data-theme="light"]) .art-hero--lilac, :root:not([data-theme="light"]) .rv { background: radial-gradient(90% 80% at 80% 15%, var(--glow), transparent 60%), var(--p-lilac); }
  :root:not([data-theme="light"]) .nw-art.a3, :root:not([data-theme="light"]) .art-hero--mint { background: radial-gradient(90% 80% at 20% 85%, var(--glow), transparent 60%), var(--p-mint); }
  :root:not([data-theme="light"]) .nw-art.a4, :root:not([data-theme="light"]) .art-hero--peach { background: radial-gradient(90% 80% at 80% 85%, var(--glow), transparent 60%), var(--p-peach); }
  :root:not([data-theme="light"]) .nw-art.a5, :root:not([data-theme="light"]) .art-hero--sand { background: radial-gradient(90% 80% at 20% 15%, var(--glow), transparent 60%), var(--p-sand); }
  :root:not([data-theme="light"]) .nw-art.a6, :root:not([data-theme="light"]) .art-hero--pink { background: radial-gradient(90% 80% at 80% 15%, var(--glow), transparent 60%), var(--p-pink); }
  :root:not([data-theme="light"]) .art-hero .kam { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
  :root:not([data-theme="light"]) .art-shot img { box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }

  /* Artikel "What your message says": de proefkaart */
  :root:not([data-theme="light"]) .rv-card { background: #1c1c1e; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
  :root:not([data-theme="light"]) .rv-in, :root:not([data-theme="light"]) .rv-in:focus { background: #2c2c2e; }
  :root:not([data-theme="light"]) .rv-how { color: var(--muted); }
  :root:not([data-theme="light"]) .rv-mental, :root:not([data-theme="light"]) .rv-medication, :root:not([data-theme="light"]) .rv-health { --rv-c: #a98bff; --rv-bg: rgba(142, 92, 247, .22); }
  :root:not([data-theme="light"]) .rv-relationship, :root:not([data-theme="light"]) .rv-life { --rv-c: #ff8aa3; --rv-bg: rgba(255, 107, 138, .2); }
  :root:not([data-theme="light"]) .rv-money, :root:not([data-theme="light"]) .rv-work { --rv-c: #ffc23d; --rv-bg: rgba(227, 155, 0, .22); }
  :root:not([data-theme="light"]) .rv-sexuality, :root:not([data-theme="light"]) .rv-religion, :root:not([data-theme="light"]) .rv-legal { --rv-c: #3dd6bb; --rv-bg: rgba(20, 163, 139, .22); }

  /* About: wie we zijn */
  :root:not([data-theme="light"]) .who-contact .badge:not(:first-child) { background: #2c2c2e; }

  /* Business: uitrol over het team, en de detectiekaart */
  :root:not([data-theme="light"]) .det-card, :root:not([data-theme="light"]) .team { background: #1c1c1e; color: #f5f5f7; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); }
  :root:not([data-theme="light"]) .team-head small { color: var(--muted); }
  :root:not([data-theme="light"]) .team .pc b { border-color: #1c1c1e; }
  :root:not([data-theme="light"]) .team .pc.ok i { color: #f5f5f7; }
  :root:not([data-theme="light"]) .team .pc.ok:nth-child(4n+1) { background: rgba(10, 132, 255, .3); } :root:not([data-theme="light"]) .team .pc.ok:nth-child(4n+2) { background: rgba(255, 140, 90, .3); }
  :root:not([data-theme="light"]) .team .pc.ok:nth-child(4n+3) { background: rgba(48, 209, 120, .28); } :root:not([data-theme="light"]) .team .pc.ok:nth-child(4n+4) { background: rgba(160, 120, 255, .3); }
  :root:not([data-theme="light"]) .team-bar { background: #2c2c2e; }

  /* Solutions: het nummer bij een actieve kaart */
  :root:not([data-theme="light"]) .so-card.on .so-k { background: rgba(10, 132, 255, .22); color: #6cb8ff; }

  /* Security: berichtjes en repokaart in de illustraties */
  :root:not([data-theme="light"]) .sx-msg, :root:not([data-theme="light"]) .sx-repo { background: #1c1c1e; color: #f5f5f7; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  :root:not([data-theme="light"]) .sx-msg small, :root:not([data-theme="light"]) .sx-pair .sx-msg small, :root:not([data-theme="light"]) .sx-repo .f { color: var(--muted); }
  :root:not([data-theme="light"]) .sx-msg.back small { color: #30d158; }
  :root:not([data-theme="light"]) .sx-p { color: #6cb8ff; background: rgba(10, 132, 255, .22); }
  :root:not([data-theme="light"]) .sx-repo .h em { color: var(--muted); border-color: #3a3a3c; }

  /* Security and privacy: illustraties, tegels en zegels */
  :root:not([data-theme="light"]) .tr-ill.you { background: radial-gradient(90% 80% at 15% 10%, var(--glow) 0%, transparent 60%), linear-gradient(135deg, #0e2f5c, #154a86 50%, #114a4a); }
  :root:not([data-theme="light"]) .tr-ill.biz { background: radial-gradient(90% 80% at 85% 10%, var(--glow) 0%, transparent 60%), linear-gradient(135deg, #231d4a, #1a2850 55%, #0f3460); }
  :root:not([data-theme="light"]) .tr-tile { background: #1c1c1e; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
  :root:not([data-theme="light"]) .tr-tile svg, :root:not([data-theme="light"]) .tr-seal svg { stroke: #f5f5f7; }
  :root:not([data-theme="light"]) .tr-seal .dots { fill: #f5f5f7; }
  :root:not([data-theme="light"]) .tr-seal { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
  :root:not([data-theme="light"]) .tr-seal.code { background: linear-gradient(135deg, #0e2f5c, #154a86); }
  :root:not([data-theme="light"]) .tr-seal.seal { background: linear-gradient(135deg, #114a4a, #1b4f37); }
  :root:not([data-theme="light"]) .tr-seal.eu { background: linear-gradient(135deg, #231d4a, #1a2850); }

  /* Banner met zwevende vlekken (news, security) */
  :root:not([data-theme="light"]) .doc-art .b1 { background: radial-gradient(closest-side, rgba(108, 184, 255, .3), transparent); }
  :root:not([data-theme="light"]) .doc-art .b2 { background: radial-gradient(closest-side, rgba(48, 209, 160, .22), transparent); }
}

/* Melo voorop (15 okt 2026): home-hero, Kamelo merkt op / Melo luistert, Business-pakket (cx-) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cx-panel: linear-gradient(150deg, #142438, #13213a 55%, #132a2a);
    --cx-lilac: linear-gradient(150deg, #1e1b33, #181e30); --cx-win: #1c1c1e; --cx-side: #232325;
    --cx-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .cx-u { background: #2c2c2e; }
  :root:not([data-theme="light"]) .bd-note { box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7), 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .bd-note .bs span { background: #3a3a3c; }
  :root:not([data-theme="light"]) .bd-note .bs .melo { background: #f5f5f7; color: #000; }
  :root:not([data-theme="light"]) .bd-input { box-shadow: 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .bd-bar i { background: #3a3a3c; }
  :root:not([data-theme="light"]) .bz-msg { background: #2c2c2e; }
  :root:not([data-theme="light"]) .bz-badge { box-shadow: 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .ph { color: #6cb8ff; }
  :root:not([data-theme="light"]) .cx-side .rc.on { background: #3a3a3c; }
  :root:not([data-theme="light"]) .cx-side { border-color: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-pill, :root:not([data-theme="light"]) .st-private { background: rgba(48, 209, 88, .16); color: #30d158; }
  :root:not([data-theme="light"]) .cx-compose { box-shadow: 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .cx-compose i { background: #f5f5f7; }
  :root:not([data-theme="light"]) .cx-compose svg { stroke: #000; }
  :root:not([data-theme="light"]) .cx-card, :root:not([data-theme="light"]) .cx-pack-grid { background: #161618; }
  :root:not([data-theme="light"]) .cx-bar, :root:not([data-theme="light"]) .cx-work .h, :root:not([data-theme="light"]) .cx-pol .h,
  :root:not([data-theme="light"]) .cx-pol li + li, :root:not([data-theme="light"]) .cx-pol .ft { border-color: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-bar i { background: #3a3a3c; }
  :root:not([data-theme="light"]) .cx-site .q { box-shadow: 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .cx-note { background: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-note p { color: #d1d1d6; }
  :root:not([data-theme="light"]) .cx-note .bs span { background: #3a3a3c; }
  :root:not([data-theme="light"]) .cx-note .bs .melo { background: #f5f5f7; color: #000; }
  :root:not([data-theme="light"]) .cx-doc, :root:not([data-theme="light"]) .cx-pol .lg { background: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-pol .lg img.inv { filter: invert(1); }
  :root:not([data-theme="light"]) .cx-plus { background: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-plus b { background: #161618; box-shadow: 0 0 0 1px #3a3a3c; }
  :root:not([data-theme="light"]) .cx-bundle { background: #000; color: #f5f5f7; }
  :root:not([data-theme="light"]) .st-masked { background: rgba(10, 132, 255, .22); color: #6cb8ff; }
  :root:not([data-theme="light"]) .st-allowed { background: rgba(160, 120, 255, .24); color: #c4a8ff; }
  :root:not([data-theme="light"]) .st-blocked { background: rgba(255, 69, 58, .2); color: #ff6961; }
  :root:not([data-theme="light"]) .cx-btn.main img.inv { filter: none; }
  :root:not([data-theme="light"]) .cx-bundle .lgs i { background: #2c2c2e; box-shadow: 0 0 0 2px #000; }
  :root:not([data-theme="light"]) .cx-bundle .lgs img.inv { filter: invert(1); }
  :root:not([data-theme="light"]) .cx-btn:not(.main) img { filter: invert(1); }
  :root:not([data-theme="light"]) .cx-btn:not(.main), :root:not([data-theme="light"]) .cx-card .cx-btn:not(.main) { background: #2c2c2e; }
  :root:not([data-theme="light"]) .cx-ctas[data-store] > .cx-btn:first-child img { filter: none; }
  :root:not([data-theme="light"]) .cx-ctas[data-store] > .cx-btn:first-child { background: var(--ink); }
  :root:not([data-theme="light"]) .cx-strip .ph { color: #6cb8ff; }
  :root:not([data-theme="light"]) .touch .final .cx-btn.main { background: #2c2c2e; color: #f5f5f7; }
}

/* Kamelo-systeem (15 okt): kaarten van de vereisten, stappen en bewijs in het donker */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --k-ok: #30d158; --k-no: #ff453a; --k-shadow: 0 18px 44px -20px rgba(0, 0, 0, .7); }
  :root:not([data-theme="light"]) .k-req-card, :root:not([data-theme="light"]) .k-two article, :root:not([data-theme="light"]) .k-proof-card,
  :root:not([data-theme="light"]) .k-art { background: #1c1c1e; }
  :root:not([data-theme="light"]) .k-req-card.k-melo { background: linear-gradient(160deg, #0e2a38, #102b3b); }
  :root:not([data-theme="light"]) .k-req-card .k-facts li, :root:not([data-theme="light"]) .k-two .k-facts li { border-color: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .k-ic, :root:not([data-theme="light"]) .k-bar, :root:not([data-theme="light"]) .k-mini-note,
  :root:not([data-theme="light"]) .k-mini-melo { background: #2c2c2e; }
  :root:not([data-theme="light"]) .k-bar i, :root:not([data-theme="light"]) .k-mini-melo i, :root:not([data-theme="light"]) .k-mini-note em,
  :root:not([data-theme="light"]) .k-bar .k-puzzle { background: #3a3a3c; }
  :root:not([data-theme="light"]) .k-mini-note em.on, :root:not([data-theme="light"]) .k-mini-badge { background: #f5f5f7; color: #000; }
  :root:not([data-theme="light"]) .k-mini-badge img { filter: none; }
  :root:not([data-theme="light"]) .k-mini-melo em { background: rgba(48, 209, 88, .16); color: #30d158; }
  :root:not([data-theme="light"]) .k-nudge, :root:not([data-theme="light"]) .k-where > li { background: #1c1c1e; }
  :root:not([data-theme="light"]) .k-nudge-note, :root:not([data-theme="light"]) .k-nudge-input { background: #2c2c2e; box-shadow: none; }
  :root:not([data-theme="light"]) .k-nudge-note p { color: #d1d1d6; }
  :root:not([data-theme="light"]) .k-nudge-note em { background: #3a3a3c; }
  :root:not([data-theme="light"]) .k-nudge-note em.on { background: #f5f5f7; color: #000; }
  :root:not([data-theme="light"]) .k-where .k-facts li { border-color: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .k-shot { background: radial-gradient(60% 70% at 20% 15%, rgba(108, 184, 255, .16), transparent 60%), linear-gradient(140deg, #0d2c55, #0f3f74 55%, #0f4b52); }
  :root:not([data-theme="light"]) .k-shot video,
  :root:not([data-theme="light"]) .k-shot img { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
  :root:not([data-theme="light"]) .k-trio li { background: #1c1c1e; }
  :root:not([data-theme="light"]) .k-know-stage { background: radial-gradient(60% 70% at 20% 15%, rgba(108, 184, 255, .16), transparent 60%), linear-gradient(140deg, #0d2c55, #0f3f74 55%, #0f4b52); }
  :root:not([data-theme="light"]) .k-know-card { background: #1c1c1e; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); }
  :root:not([data-theme="light"]) .k-know-list li { background: #2c2c2e; }
  :root:not([data-theme="light"]) .k-know-lock { background: rgba(48, 209, 88, .16); color: #30d158; }
  :root:not([data-theme="light"]) .k-know-row { border-color: rgba(255, 255, 255, .08); }
  :root.ink-js:not([data-theme="light"]) .ink-sec .ink-w { color: #48484a; }
  :root.ink-js:not([data-theme="light"]) .ink-sec .ink-w.on { color: var(--ink); }
  :root:not([data-theme="light"]) .k-check-out.no { color: #ff9f0a; }
  /* Het zwarte productmoment iets lichter dan de zwarte pagina, zodat het vlak zichtbaar blijft */
  :root:not([data-theme="light"]) .k-dark { --k-dark: #0f0f11; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-products li:first-child a { background: linear-gradient(160deg, #0e2a38, #102b3b); }
  :root:not([data-theme="light"]) .k-ex-chat { background: #1c1c1e; box-shadow: none; }
  :root:not([data-theme="light"]) .k-ex-a { background: #2c2c2e; }
  :root:not([data-theme="light"]) .k-demo-note { color: #d1d1d6; }
  :root:not([data-theme="light"]) .k-btn { background: #f5f5f7; color: #000; }
  :root:not([data-theme="light"]) .k-btn2 { background: #2c2c2e; color: #f5f5f7; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-tour-art { background: radial-gradient(70% 60% at 30% 20%, rgba(108, 184, 255, .16), transparent 70%), linear-gradient(150deg, #0d2c55, #0f3f74 60%, #0f4b52); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-pack-art { background: linear-gradient(150deg, #0e2a38, #102b3b); }
  :root:not([data-theme="light"]) .k-pack-ext { background: linear-gradient(150deg, #231d4a, #1a2850); }
  :root:not([data-theme="light"]) .k-app-melo { background: linear-gradient(160deg, #0e2a38, #102b3b) !important; }
  :root:not([data-theme="light"]) .k-apps img[src*="openai"], :root:not([data-theme="light"]) .k-apps img[src*="deepseek"] { filter: invert(1); }
}