/* Theme: the light and the dark theme. Loaded by the shell right after the design system styles, before site.css.
   html[data-theme] is set by the inline script in the head (KIT.md, Theme). Whatever is not pinned follows the colour
   tokens below. A surface that must look the same in both themes uses --ink-fixed and --paper-fixed instead of
   --inkt and --papier. The swap itself is instant: site.js puts .theme-swap on html for one style flush. */

:root {
  --paper-fixed: #ffffff; --ink-fixed: #1c1c1e; --grafiet-fixed: #6e6e73; --kobalt-text: var(--kobalt);
  /* the navy stage of the calls hero in the dark theme (effects.css, mobile.css): its ground and the glow in the middle; the shades between and the overlays are mixed from these two */
  --calls-stage: #0d0f1e; --calls-glow: #22368f;
  --shadow-knob: 0 1px 2px rgba(0,0,0,.16);
  --shadow-pop: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-dialog: 0 2px 6px rgba(0,0,0,.06), 0 24px 64px rgba(0,0,0,.12);
  --glass-tint: rgba(255,255,255,.55); --glass-panel-tint: rgba(255,255,255,.82); --glass-rim: rgba(255,255,255,.75); --glass-line: rgba(255,255,255,.6);
}
html { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --papier: #131315; --nevel: #1c1c1e; --nevel-2: #2c2c2e; --lijn: #3a3a3c; --lijn-zacht: #2c2c2e; --lijn-sterk: #48484a;
  --inkt: #f5f5f7; --grafiet: #a1a1a6; --kobalt-tint: #1a2039; --kobalt-ring: rgba(59,91,219,.5); --scrim: rgba(0,0,0,.5);
  --kobalt-text: #9db0ff;
  --shadow-knob: 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.45);
  --shadow-dialog: 0 2px 6px rgba(0,0,0,.3), 0 24px 64px rgba(0,0,0,.55);
  --glass-tint: rgba(28,28,30,.55); --glass-panel-tint: rgba(28,28,30,.82); --glass-rim: rgba(255,255,255,.22); --glass-line: rgba(255,255,255,.14);
}

/* Small cobalt text: plain links (the design system sets them to --kobalt). Large headings and icons keep --kobalt. */
a { color: var(--kobalt-text); }

/* The logo: the dark wordmark on light paper, the white one on dark paper. Two images, shown with display, no filter. */
.site-header .brand img.logo-light, .site-footer .brandcol img.logo-light, .lockup img.logo-light { display: none; }
html[data-theme="dark"] .site-header .brand img.logo-dark, html[data-theme="dark"] .site-footer .brandcol img.logo-dark, html[data-theme="dark"] .lockup img.logo-dark { display: none; }
html[data-theme="dark"] .site-header .brand img.logo-light, html[data-theme="dark"] .site-footer .brandcol img.logo-light, html[data-theme="dark"] .lockup img.logo-light { display: block; }

/* The footer of a page that ends in the curtain (the homepage) sits on ink in both themes (site.css): it wears the dark values of the tokens it uses
   and shows the white wordmark. Rules of their own, not part of the lists above, so a browser without :has() drops only these. */
html:has(.cta-band--curtain) .site-footer { color-scheme: dark; --papier: #131315; --lijn: #3a3a3c; --inkt: #f5f5f7; --grafiet: #a1a1a6; --kobalt-tint: #1a2039; --kobalt-text: #9db0ff; }
html:has(.cta-band--curtain) .site-footer .brandcol img.logo-dark { display: none; }
html:has(.cta-band--curtain) .site-footer .brandcol img.logo-light { display: block; }

/* The curtain stays ink in both themes (--ink-fixed). On the dark page it would merge with it, so its top edge gets a 1px light rim. */
html[data-theme="dark"] .curtain::before { box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

/* The theme toggle: the second glass pill, two round items of 40px (the engine and the glass are in glass.css). */
nav.theme-toggle { padding: 4px; touch-action: pan-y; }
.theme-toggle .nimbus-item { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; }
.theme-toggle .nv-ico svg { width: 18px; height: 18px; }
/* the CSS drop (no WebGL, or reduced motion) in the dark tone: less white, more cobalt */
.nimbus-nav[data-tone="dark"] .nimbus-drop { background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.4), rgba(255,255,255,0) 55%), rgba(255,255,255,.14);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 6px rgba(59,91,219,.4), inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 16px -6px rgba(59,91,219,.55); }

/* No colour transitions while the theme changes: nothing eases between the two palettes. */
.theme-swap, .theme-swap *, .theme-swap *::before, .theme-swap *::after { transition: none !important; }