/* spec vis — shared light/dark theme. Dark is default; [data-theme=light] flips it. */
html[data-theme="light"]{
  --black:#F4F2EA;      /* page background */
  --card:#FFFFFF;       /* cards / panels */
  --line:#E5E0D2;       /* hairlines */
  --line-2:#D6D0BE;     /* stronger lines */
  --white:#17160F;      /* primary text */
  --grey:#5C5A52;       /* secondary text */
  --grey-2:#8A887E;     /* muted text */
  color-scheme:light;
}
html[data-theme="light"] body{background:var(--black);color:var(--white)}
html[data-theme="light"] .grain{opacity:.02;mix-blend-mode:multiply}
html[data-theme="light"] header.nav{background:rgba(244,242,234,.85)!important}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#ECE8DC}
html[data-theme="light"]{scrollbar-color:var(--t) #ECE8DC}
/* soften the dark decorative hero backdrops so they don't read as black boxes */
html[data-theme="light"] .bg,
html[data-theme="light"] .shero .bg,
html[data-theme="light"] .hero .bg{opacity:.10!important}
/* light-on-dark bits that must flip */
html[data-theme="light"] .nav-right a,
html[data-theme="light"] .nav-right svg{color:#17160F}
html[data-theme="light"] .lede,
html[data-theme="light"] .shero .lede,
html[data-theme="light"] .hero .lede{color:#43413a}
/* form fields */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select{background:#fff;color:var(--white);border-color:var(--line-2)}
/* the floating toggle button */
#themeToggle{position:fixed;bottom:20px;right:20px;z-index:9998;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--card);color:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.35);transition:border-color .2s,transform .2s}
#themeToggle:hover{border-color:var(--acc);transform:translateY(-2px)}
#themeToggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
@media (max-width:640px){#themeToggle{bottom:14px;right:14px;width:42px;height:42px}}

.lang-toggle{background:none;border:1px solid var(--line-2,#2a2a2a);color:var(--white,#fff);border-radius:7px;padding:6px 11px;font-family:var(--mono,ui-monospace,monospace);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;line-height:1;min-width:34px}
.lang-toggle:hover{border-color:var(--acc,#E9B84C);color:var(--acc,#E9B84C)}
html[data-theme="light"] .lang-toggle{color:var(--white);border-color:var(--line-2)}