/* theme.css — sitewide light/dark tokens + toggle
   Light is the default (cream / ink). Dark remaps the same names so existing
   pages swap cleanly. Load after each page's own <style> so toggle chrome wins.

   Invert bands (#work, footer, Klein CTAs) lock --ink/--cream/--blue back to
   the designed values so cinematic dark slabs do not flip to cream. */
:root{
  --paper:#fff;
  --nav-stuck:color-mix(in srgb,var(--cream) 78%,transparent);
  --on-gold:#141210;
}

html{
  color-scheme:light;
  background:var(--cream);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --cream:#171410;
  --cream-2:#211D17;
  --cream-3:#2A251D;
  --ink:#EFE9DC;
  --ink-2:#D4CDB8;
  --ink-soft:#C9C0AE;
  --line:rgba(239,233,220,.16);
  --line-2:rgba(239,233,220,.08);
  --muted:rgba(239,233,220,.55);
  --blue:#8583FF;
  --paper:#211D17;
  --nav-stuck:color-mix(in srgb,var(--cream) 84%,transparent);
}

html[data-theme="dark"] body::before{
  opacity:.14;
  mix-blend-mode:overlay;
}

/* Gold chips keep dark type — cream-on-ochre fails AA */
html[data-theme="dark"] .sticker--ochre{color:var(--on-gold)}

/* ---------- Invert bands stay ink / Klein ----------
   Token swap would turn these into cream slabs. Re-seed light tokens on the
   band so children (links, buttons, chips) keep designed contrast. */
html[data-theme="dark"] :is(
  #work,
  .project-banner-inner,
  .cta-bay,
  .tldr,
  .kn-foot,
  .kn-close,
  body > footer:not(.footer),
  #book,
  .book,
  .cta:not(.cta-row):not(.kn-wf-block)
){
  --cream:#F4EFE6;
  --cream-2:#EAE3D4;
  --cream-3:#DDD3BD;
  --ink:#0F0F0F;
  --ink-2:#1A1A1A;
  --ink-soft:#3a3a3a;
  --line:rgba(244,239,230,.16);
  --line-2:rgba(244,239,230,.08);
  --muted:rgba(244,239,230,.55);
  --blue:#1B1AFF;
  --paper:#fff;
  color-scheme:dark;
}

/* Meet calendar is a paper sheet on Klein — keep it writable */
html[data-theme="dark"] :is(.scheduler, #schedulerCard){
  --cream:#F4EFE6;
  --cream-2:#EAE3D4;
  --ink:#0F0F0F;
  --ink-2:#1A1A1A;
  --line:rgba(15,15,15,.12);
  --line-2:rgba(15,15,15,.06);
  --muted:rgba(15,15,15,.55);
  --blue:#1B1AFF;
  --paper:#fff;
  color-scheme:light;
  background:#fff;
  color:#0F0F0F;
}

/* ---------- Toggle + nav cluster ---------- */
.nav-end{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}
.theme-toggle{
  width:42px;height:42px;padding:0;flex:none;
  display:inline-grid;place-items:center;
  border:1.5px solid var(--ink);
  border-radius:99px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  transition:background .25s var(--ease,cubic-bezier(.2,.7,.2,1)),
              color .25s var(--ease,cubic-bezier(.2,.7,.2,1)),
              border-color .25s var(--ease,cubic-bezier(.2,.7,.2,1)),
              transform .25s var(--ease,cubic-bezier(.2,.7,.2,1));
}
.theme-toggle:hover{
  background:var(--cream-2);
  transform:translateY(-1px);
}
.theme-toggle:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}
.theme-toggle .theme-icon{
  width:18px;height:18px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.theme-toggle .theme-icon-moon{display:none}
html[data-theme="dark"] .theme-toggle .theme-icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-icon-moon{display:block}

@media (max-width:420px){
  .theme-toggle{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .theme-toggle{transition:none}
  .theme-toggle:hover{transform:none}
}

/* Meet page canvas is painted cream; fade it so the dark page shows through */
html[data-theme="dark"] #bgCanvas{opacity:.28}

/* Clients login card lifts off the page in dark */
html[data-theme="dark"] main .card{
  background:var(--cream-2);
}

/* Native controls follow the page scheme */
html[data-theme="dark"] :is(input, textarea, select){
  color-scheme:dark;
  accent-color:var(--blue);
}
html[data-theme="dark"] :is(.scheduler, #schedulerCard) :is(input, textarea, select){
  color-scheme:light;
}

/* Print always ships the cream/ink original */
@media print{
  html[data-theme="dark"]{
    --cream:#F4EFE6;
    --cream-2:#EAE3D4;
    --cream-3:#DDD3BD;
    --ink:#0F0F0F;
    --ink-2:#1A1A1A;
    --ink-soft:#3a3a3a;
    --line:rgba(15,15,15,.12);
    --line-2:rgba(15,15,15,.06);
    --muted:rgba(15,15,15,.55);
    --blue:#1B1AFF;
    --paper:#fff;
  }
  .theme-toggle{display:none !important}
}