/* Light / dark theme layer. Loaded after site.css; remaps its tokens. */
html[data-theme="light"] {
  color-scheme: light;
  --night: #fbfbfd;
  --night-2: #f5f5f7;
  --night-card: #ffffff;
  --night-ink: #1d1d1f;
  --night-ink-2: #6e6e73;
  --night-hairline: #d2d2d7;
  --link-night: #0066cc;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --paper-2: #1c1c1e;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --hairline: #38383a;
  --link: #2997ff;
}
html[data-theme="dark"] .nav, html[data-theme="dark"] .nav.is-light {
  background: rgba(22,22,23,.8); color: #f5f5f7; border-bottom-color: rgba(255,255,255,.1);
}
html[data-theme="light"] .nav, html[data-theme="light"] .nav.is-light {
  background: rgba(251,251,253,.8); color: #1d1d1f; border-bottom-color: rgba(0,0,0,.08);
}

/* ---- Toggle button -------------------------------------------------------- */
.theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer; opacity: .8; transition: opacity .2s, background-color .2s;
}
.theme-toggle:hover { opacity: 1; background: rgba(128,128,128,.18); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
@media (max-width: 860px) { .theme-toggle { margin-left: auto; } .theme-toggle + .nav-toggle, .theme-toggle + .nav__toggle { margin-left: 0; } }


/* ---- Anchor-specific fixes ------------------------------------------------ */
/* Cards that are always dark keep light text in light mode. */
html[data-theme="light"] .tile--glass,
html[data-theme="light"] .tile--private {
  --night-ink: #f5f5f7; --night-ink-2: #a1a1a6; color: #f5f5f7;
}
html[data-theme="dark"] .statement .w { color: rgba(245, 245, 247, var(--lit, 0.16)); }
html[data-theme="dark"] .statement .w.hl { color: rgba(41, 151, 255, var(--lit, 0.16)); }
html[data-theme="dark"] .chips li,
html[data-theme="dark"] .closer__tab[aria-selected="true"],
html[data-theme="dark"] .get__card { background: #2c2c2e; color: #f5f5f7; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
html[data-theme="dark"] .closer__tabs { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .get__card ol li::before { background: #f5f5f7; color: #000; }
html[data-theme="dark"] .get__card li { border-top-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .get__card code,
html[data-theme="dark"] .spec__body code,
html[data-theme="dark"] .faq__a code,
html[data-theme="dark"] .doc code { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .get__badge--grey { background: rgba(255,255,255,.1); }
html[data-theme="dark"] .skip-link { background: #2c2c2e; color: #fff; }
html[data-theme="dark"] .compare__head { background: rgba(28,28,30,.92); }
html[data-theme="light"] .cheat__keys kbd { background: #ececf0; color: #1d1d1f; box-shadow: 0 -2px 0 rgba(0,0,0,.12) inset, 0 1px 0 #fff inset; }