/* Een bedrijf met een lichte site krijgt de configurator licht.
 *
 * De pagina is op CSS-variabelen gebouwd en merk.js zet die om zodra het
 * bedrijfsbestand thema.modus = "licht" zegt. Dit bestand doet wat variabelen
 * niet kunnen: de serifkop wordt het kopletter van het bedrijf, het
 * goudverloop op de knoppen wordt zijn accentkleur in zijn knopvorm, en de
 * donkere waas achter het productbeeld wordt een lichte. Alles staat onder
 * html[data-thema="licht"]; zonder dat attribuut verandert er niets, ook
 * niet aan onze eigen pagina.
 *
 * Variabelen die merk.js zet en die hier gebruikt worden:
 *   --kopfont           kopletter ("Inter Tight", …)
 *   --merk-radius       999px (pil) · 12px (rond) · 4px (hoekig)
 *   --merk-knoptekst    tekstkleur op een knop in de accentkleur
 *   --merk-kopbalk      kleur van de balk met het logo, en van de voet
 *   --merk-kopbalk-tekst
 */

/* Standaarden; wat merk.js op <html> zet gaat hier als inline-stijl overheen. */
html[data-thema="licht"] {
  color-scheme: light;
  --merk-radius: 12px;
  --merk-knoptekst: #fff;
  --merk-kopbalk: var(--text);
  --merk-kopbalk-tekst: #fff;
}

html[data-thema="licht"] body { background: var(--bg); color: var(--text-2); }
/* De korrel die het donkere vlak textuur geeft, leest op wit als vuil. */
html[data-thema="licht"] body::before { opacity: .018; }
html[data-thema="licht"] ::selection { background: var(--accent); color: #fff; }

/* ---------- letter ---------- */
html[data-thema="licht"] .h1,
html[data-thema="licht"] .h2 {
  font-family: var(--kopfont, var(--font));
  font-weight: 700;
  letter-spacing: -.035em;
}
html[data-thema="licht"] .h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.02; }
html[data-thema="licht"] .h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -.03em; }
html[data-thema="licht"] h3,
html[data-thema="licht"] .conf__title,
html[data-thema="licht"] .klantkop__merk,
html[data-thema="licht"] .pricebar__p .v { font-family: var(--kopfont, var(--font)); }
/* Het goudverloop in de kop is op onze goudtint gebouwd; onder een ander merk
   wordt het tweede woord gewoon zijn accentkleur. */
html[data-thema="licht"] .grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--acc); }
html[data-thema="licht"] .eyebrow { color: var(--acc); }

/* ---------- knoppen ---------- */
html[data-thema="licht"] .btn {
  background: var(--acc);
  color: var(--merk-knoptekst);
  border-radius: var(--merk-radius);
  box-shadow: var(--schaduw-1);
  font-family: var(--kopfont, var(--font));
  font-weight: 600;
}
html[data-thema="licht"] .btn::after { display: none; }
html[data-thema="licht"] .btn:hover { background: var(--accent-strong); box-shadow: var(--schaduw-2); }
html[data-thema="licht"] .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; }
html[data-thema="licht"] .btn--ghost:hover { background: var(--bg-raise-2); border-color: var(--text); }
html[data-thema="licht"] .btn--acc { background: var(--acc); color: var(--merk-knoptekst); }
html[data-thema="licht"] .btn--acc:hover { filter: none; background: var(--accent-strong); box-shadow: var(--schaduw-2); }
html[data-thema="licht"] .btn--icon { background: var(--bg-raise-2); color: var(--text); border: 1px solid var(--line-strong); }

html[data-thema="licht"] .pill { background: var(--bg-raise-2); border-color: var(--line); color: var(--text-2); }
html[data-thema="licht"] .dot--ok { box-shadow: none; }

html[data-thema="licht"] .matswitch { background: var(--bg-raise-2); border-color: var(--line); border-radius: var(--merk-radius); }
html[data-thema="licht"] .matswitch button,
html[data-thema="licht"] .matswitch a { border-radius: var(--merk-radius); color: var(--text-2); }
html[data-thema="licht"] .matswitch button.is-on,
html[data-thema="licht"] .matswitch a.is-on { background: var(--acc); color: var(--merk-knoptekst); }
html[data-thema="licht"] .conf__hero .aanzicht button.is-on { color: var(--merk-knoptekst); }
html[data-thema="licht"] .btw button.is-on { background: var(--acc); color: var(--merk-knoptekst); }

/* ---------- vlakken ---------- */
html[data-thema="licht"] .card {
  background: var(--bg-raise);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--schaduw-2);
}
html[data-thema="licht"] .grp,
html[data-thema="licht"] .preset,
html[data-thema="licht"] .conf__badge,
html[data-thema="licht"] .conf__option-detail { box-shadow: var(--schaduw-1); }
html[data-thema="licht"] .preset:hover { background: var(--bg-raise); border-color: var(--acc); box-shadow: var(--schaduw-2); }
html[data-thema="licht"] .pricebar { background: var(--bg-raise); box-shadow: var(--schaduw-2); }
html[data-thema="licht"] .tile__c { background: var(--bg-raise-2); }
html[data-thema="licht"] .tile input:checked + .tile__c { background: color-mix(in srgb, var(--acc) 9%, var(--bg-raise)); }
html[data-thema="licht"] .tile__img,
html[data-thema="licht"] .tile__sw,
html[data-thema="licht"] .preset__th { border-color: rgba(0,0,0,.10); }
html[data-thema="licht"] .conf__thumbs button { background: var(--bg-raise-2); }
html[data-thema="licht"] .fld input,
html[data-thema="licht"] .fld textarea { background: var(--bg-raise); border-color: var(--line-strong); }
html[data-thema="licht"] .lead__msg.err { background: rgba(180,35,24,.08); color: #b42318; border-color: rgba(180,35,24,.3); }

/* Het productbeeld: op de donkere pagina ligt er een gedimde, vervaagde
   kopie van het beeld achter het beeld. Op licht wordt dat een lichte waas,
   anders staat er een zwart vlak midden op een witte pagina. */
html[data-thema="licht"] .conf__hero { background: var(--bg-raise-2); border-color: var(--line); box-shadow: var(--schaduw-2); }
html[data-thema="licht"] .conf__hero .hbg { filter: blur(40px) brightness(1.08) saturate(1.05); opacity: .4; transform: scale(1.25); }
html[data-thema="licht"] .conf__hero .hbg::after { background: none; }
html[data-thema="licht"] .conf__hero.is-scaled img { box-shadow: 0 18px 50px rgba(0,0,0,.22); }
html[data-thema="licht"] .conf__hero .missing { background: rgba(255,255,255,.78); }
html[data-thema="licht"] .missing b { color: var(--text); }
html[data-thema="licht"] .missing span { color: var(--text-2); }
@media (max-width: 899px) {
  html[data-thema="licht"] .conf__visual { background: var(--bg); }
}

/* ---------- de kop en de voet van het bedrijf ---------- */
html[data-thema="licht"] .klantlint { background: var(--bg-raise-2); border-bottom: 1px solid var(--line); }
html[data-thema="licht"] .klantkop { background: var(--merk-kopbalk); border-bottom: 0; }
html[data-thema="licht"] .klantkop__in { padding-block: 1rem; }
html[data-thema="licht"] .klantkop__merk { color: var(--merk-kopbalk-tekst); }
html[data-thema="licht"] .klantkop__logo { max-height: 30px; }
/* Het telefoonnummer rechts wordt de knop die het bedrijf op zijn eigen site
   rechtsboven heeft staan. */
html[data-thema="licht"] .klantkop__tel {
  background: var(--acc); color: var(--merk-knoptekst);
  padding: .6rem 1.15rem; border-radius: var(--merk-radius);
  font-size: .84rem; font-family: var(--kopfont, var(--font));
  transition: background var(--snel) var(--ease);
}
html[data-thema="licht"] .klantkop__tel:hover { background: var(--accent-strong); }
html[data-thema="licht"] .klantvoet { background: var(--merk-kopbalk); border-top: 0; }
html[data-thema="licht"] .klantvoet p { color: rgba(255,255,255,.72); }
html[data-thema="licht"] .klantvoet a { color: #fff !important; }
html[data-thema="licht"] .foot { border-top: 0; }
html[data-thema="licht"] .sectie { border-top-color: var(--line); }

/* Uitlegblokken, veelgestelde vragen en de tekst onder het beeld erven
   --muted uit de donkere pagina; op licht is dat de tweede tekstkleur. */
html[data-thema="licht"] { --muted: var(--text-2); }

/* ---------- modules die hun eigen stijl meebrengen ---------- */
/* Staat er een logo, dan is de naam als tekst ernaast dubbel: op zijn eigen
   site staat ook alleen het woordmerk. */
html[data-thema="licht"] .klantkop__logo:not([hidden]) + .klantkop__merk { display: none; }
@media (max-width: 520px) {
  html[data-thema="licht"] .klantkop__in { flex-wrap: nowrap; gap: .7rem; }
  html[data-thema="licht"] .klantkop__logo { max-height: 24px; }
  html[data-thema="licht"] .klantkop__tel { padding: .5rem .9rem; font-size: .78rem; white-space: nowrap; }
}
/* De AI-foto (aifoto.js) heeft een donker sleepvak met witte tekst. */
html[data-thema="licht"] .ngf-box { background: var(--bg-raise-2); }
html[data-thema="licht"] .ngf-drop { color: var(--text-2); border-color: var(--line-strong); }
html[data-thema="licht"] .ngf-drop b { color: var(--text); }
html[data-thema="licht"] .ngf-drop.over { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--bg-raise)); }
/* Het tekenprogramma (tekenprogramma.js) is al licht, maar met ons goud en
   een zwarte actieve tab. */
html[data-thema="licht"] .ngtk { --tk-accent: var(--acc); --tk-tekst: var(--text); --tk-lijn: var(--line-strong); border-color: var(--line); }
html[data-thema="licht"] .ngtk__tab[aria-selected="true"] { background: var(--merk-kopbalk); border-color: var(--merk-kopbalk); }
html[data-thema="licht"] .ngtk__knop { border-radius: var(--merk-radius); }

/* Zolang het bedrijfsbestand laadt (merk-vooraf.js): wit, niets zichtbaar.
   Na vier seconden toch tonen, mocht merk.js nooit klaar melden. */
html[data-merk-laden], html[data-merk-laden] body { background: #fff !important; }
html[data-merk-laden] body { visibility: hidden; animation: merk-toon 0s 4s forwards; }
@keyframes merk-toon { to { visibility: visible; } }