/* GKM light mode (Gilton, 6 okt): html[data-theme="light"]. Tekst mat zwart (geen pikzwart), geel alleen op kernwoorden,
   knoppen en accenten. Hero (Home) en foto-CTA blijven donker. Vereist tokens.css, base.css en components.css. */

:root[data-theme="light"] {
  color-scheme: light;
  --black: #f4f4f2;       /* paginavlak */
  --dark: #ffffff;        /* kaarten en vlakken */
  --dark-2: #ececea;
  --white: #222;          /* koppen en kernwoorden: mat zwart */
  --text: #333;
  --text-2: #444;
  --muted: #6b6b6b;
  --line: rgba(0,0,0,.08);
  --line-2: rgba(0,0,0,.16);
  --glow: rgba(0,0,0,.025);
  --spotlight: rgba(252,178,2,.12);
}

/* Donkere eilanden: hier gelden de donkere tokens */
:root[data-theme="light"] :is(.hero-x, .cta-photo) {
  --black: #000; --dark: #191919; --dark-2: #111; --white: #fff; --text: #f0f0f0; --text-2: #e2e2e2; --muted: #aaa;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  color: #fff;
}
:root[data-theme="light"] :is(.hero-x, .cta-photo) .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }

/* Pagina */
[data-theme="light"] body { background: var(--black) radial-gradient(1400px 900px at 85% -5%, #ffffff 0%, transparent 60%) no-repeat; }
[data-theme="light"] main { background-image: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.2) 50%, rgba(255,255,255,.4)), url("/assets/img/brand/noise-bg.webp"); background-blend-mode: normal, multiply; }
[data-theme="light"] a:hover { color: #d99800; }
[data-theme="light"] .grid-bg { --grid: rgba(0,0,0,.035); --grid-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 54v12M54 60h12' stroke='rgba(0,0,0,.14)' stroke-width='1'/%3E%3C/svg%3E"); }
[data-theme="light"] .ghost { -webkit-text-stroke-color: rgba(0,0,0,.07); }

/* Navigatie: licht glas */
[data-theme="light"] .nav__inner { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px -16px rgba(0,0,0,.25); }
[data-theme="light"].is-scrolled .nav__inner { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -18px rgba(0,0,0,.3); }
[data-theme="light"] .nav__link { color: #2a2a2a; }
[data-theme="light"] .nav__link:hover, [data-theme="light"] .nav__link[aria-current="page"] { color: #d99800; }
[data-theme="light"] .nav__toggle { border-color: rgba(0,0,0,.15); color: #222; }
@media (max-width: 900px) {
  [data-theme="light"].nav-open .nav__menu { background: #f4f4f2; }
  [data-theme="light"].nav-open .nav__link { color: #222; }
  [data-theme="light"].nav-open .nav__link[aria-current="page"] { color: #d99800; }
}

/* Knoppen */
[data-theme="light"] .btn--ghost { color: #222; border-color: rgba(0,0,0,.25); }
[data-theme="light"] .btn--ghost:hover { color: #222; border-color: #222; }
[data-theme="light"] .btn { box-shadow: inset 0 -8px 10px rgba(0,0,0,.03); }
[data-theme="light"] .btn--primary { box-shadow: inset 0 -8px 10px rgba(255,255,255,.18); }

/* Kaarten: zacht wit met lichte rand en diepe zachte schaduw */
[data-theme="light"] .card {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf9 60%, #f5f5f3 100%); border-color: rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.04), 0 30px 60px -30px rgba(0,0,0,.18);
}
[data-theme="light"] .card::after { background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.4px); }
[data-theme="light"] .card--feature.card--spot::before { background: radial-gradient(520px circle at var(--mx, 0%) var(--my, 0%), rgba(252,178,2,.08), transparent 60%); }
[data-theme="light"] .card--feature:hover { border-color: rgba(0,0,0,.14); }
[data-theme="light"] .card--feature p { color: #555; }
[data-theme="light"] [data-tilt-card]::after { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,1), transparent 50%); }
[data-theme="light"] :is(.persona, .fit > div, .faq details, .facts > div, .team-card, .form, .info-card, .sectors li) { box-shadow: 0 20px 40px -28px rgba(0,0,0,.2); }
[data-theme="light"] .icon-pill { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .mini-week i { background: #ddd; }
[data-theme="light"] .mini-week i.is-on { background: var(--yellow); }
[data-theme="light"] .mini-chat .mini-chat__in { border-color: rgba(0,0,0,.08); color: #333; }
[data-theme="light"] .mini-reel, [data-theme="light"] .reel { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .split__media .info-card { background: rgba(255,255,255,.9); }
[data-theme="light"] .dashes i { background: #d6d6d6; }
[data-theme="light"] .case p { color: #444; }
[data-theme="light"] .not-list li { color: #444; }
[data-theme="light"] .not-list svg { color: #aaa; }
[data-theme="light"] .sectors li { border-color: rgba(0,0,0,.08); }
[data-theme="light"] .on-yellow .step { box-shadow: 10px 10px 0 #222; }
[data-theme="light"] .on-yellow .step:hover { box-shadow: 14px 14px 0 #222; }

/* Op beelden blijft tekst wit */
[data-theme="light"] :is(.work__item figcaption, .reel__cap span, .acard, .acard__plus, .mini-viewfinder__rec) { color: #fff; }
[data-theme="light"] .reel__sound { color: #fff; border-color: rgba(255,255,255,.25); }

/* Corporate-carousel en venster */
[data-theme="light"] .acard { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .acards-dots i { background: rgba(0,0,0,.18); }
[data-theme="light"] .acards-dots i.is-on { background: var(--yellow); }
[data-theme="light"] .acards-nav__btn { background: #fff; color: #222; }
[data-theme="light"] .amodal { background: #fff; }
[data-theme="light"] .amodal::backdrop { background: rgba(0,0,0,.45); }

/* Logoband en footer */
[data-theme="light"] .marquee__track img { opacity: 1; filter: none; }
[data-theme="light"] .marquee__item { color: #333; }
[data-theme="light"] .marquee__toggle:hover { border-color: rgba(0,0,0,.4); }
[data-theme="light"] .footer__big { color: #e4e4e2; opacity: 1; }
[data-theme="light"] .footer__legal, [data-theme="light"] .footer__legal a { color: #6b6b6b; }
[data-theme="light"] .footer__legal a:hover { color: #222; }
[data-theme="light"] .footer__col a:hover { color: #d99800; }

/* Formulieren */
[data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea { background: #fff; }

/* Wisselknop licht/donker */
.theme-toggle { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--white); transition: border-color var(--t-fast), color var(--t-fast); }
.theme-toggle:hover { border-color: var(--yellow); color: var(--yellow); }
.theme-toggle .ti-sun, [data-theme="light"] .theme-toggle .ti-moon { display: none; }
[data-theme="light"] .theme-toggle .ti-sun { display: block; }
[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,.15); }
.nav__end { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .theme-toggle { width: 44px; height: 44px; position: relative; z-index: 2; } }

/* Geel blijft: wit op geel, donkere knop op de gele band */
[data-theme="light"] :is(.persona--hl, .on-yellow > .wrap > .section-head) strong { color: #fff; }
[data-theme="light"] .on-yellow .btn--dark { background: #222; color: #fff; }
[data-theme="light"] .section--glow { background: radial-gradient(1100px 460px at 50% 0%, rgba(255,255,255,.85), transparent 70%); }
[data-theme="light"] .card--feature.card--spot::before { background: radial-gradient(520px circle at var(--mx, 0%) var(--my, 0%), rgba(252,178,2,.05), transparent 60%); }
[data-theme="light"] .tq { border-color: rgba(0,0,0,.06); box-shadow: 0 30px 60px -30px rgba(0,0,0,.3); }
[data-theme="light"] .tq { background: #1a1a1a; }
[data-theme="light"] .fly__center::before { background: radial-gradient(closest-side, rgba(244,244,242,.92), rgba(244,244,242,.55) 55%, transparent); }
[data-theme="light"] .fly__item { box-shadow: 0 40px 80px -30px rgba(0,0,0,.35); }
.sound-toggle .si-on, .sound-toggle[aria-pressed="true"] .si-off { display: none; }
.sound-toggle[aria-pressed="true"] .si-on { display: block; }
.sound-toggle[aria-pressed="true"] { color: var(--yellow); border-color: rgba(252,178,2,.5); }
@media (max-width: 900px) { .nav__end { gap: 8px; } }