/*
 * soken-theme.css: light/dark theme layer for soken.dev
 *
 * Loaded on every page by /opt/soken-site/_inject-theme.mjs.
 * Dark is the original design and needs no overrides. Everything here is
 * scoped to html[data-theme="light"], which outranks :root (0,1,1 > 0,1,0),
 * so load order against the page's own <style> blocks does not matter.
 *
 * Per-page literal colours (hardcoded hex/rgba in page CSS and style="")
 * are mapped automatically into <style id="soken-theme-auto"> by the
 * injector. This file holds the design tokens, the toggle button and the
 * few hand-tuned fixes the automatic mapper cannot infer.
 */

/* ---------- 1. Design tokens ---------- */
/* No color-scheme here on purpose: setting it changes the browser's default
   button/link/form colours, and the dark theme must stay pixel-identical to
   the original site. */
html[data-theme="light"] {
  /* site tokens (index, blog, hub, mcp, audits, crypto-map, author) */
  --bg: #f3f5f9;
  --bg-card: rgba(12, 21, 37, 0.035);
  --bg-card-solid: #ffffff;
  --border: rgba(12, 21, 37, 0.11);
  --border-hover: rgba(12, 21, 37, 0.22);
  --text: rgba(12, 21, 37, 0.78);
  --text-dim: rgba(12, 21, 37, 0.62);
  --text-bright: #0c1525;
  --accent-start: #273dd2;
  --accent-mid: #2a74c9;
  --accent-end: #1c86c4;
  --color-friendly: #15803d;
  --color-legal: #1d4ed8;
  --color-restricted: #a16207;
  --color-banned: #b91c1c;
  --color-unknown: #4b5563;
  --worse: rgba(12, 21, 37, 0.5);
  --better: #15803d;

  /* wrapped / xray tokens (static/css/wrapped.css) */
  --bg-primary: #f3f5f9;
  --bg-surface: rgba(12, 21, 37, 0.04);
  --border-color: rgba(12, 21, 37, 0.12);
  --text-primary: #0c1525;
  --text-secondary: rgba(12, 21, 37, 0.82);
  --text-muted: rgba(12, 21, 37, 0.68);
  --accent: #1c6fb8;
  --green: #15803d;
  --yellow: #a16207;
  --red: #c0271d;
}

html[data-theme="light"] body { background-color: var(--bg); }

/* ---------- 2. Brand marks and icons drawn in white ---------- */
/* Header/footer logos: white or translucent white (footer uses rgba(255,255,255,0.4)). */
html[data-theme="light"] .site-header svg [fill^="rgba(255,255,255"],
html[data-theme="light"] .site-header svg [fill^="rgba(255, 255, 255"],
html[data-theme="light"] footer svg [fill^="rgba(255,255,255"],
html[data-theme="light"] footer svg [fill^="rgba(255, 255, 255"] {
  fill: rgba(12, 21, 37, 0.55);
}
/* Monochrome white icons inside SVG sprites (<symbol>/<use>) are recoloured by
   soken-theme.js (syncSymbols): CSS does not reach <use> shadow clones. */
html[data-theme="light"] .site-header svg [fill="white"],
html[data-theme="light"] .site-header svg [fill="#fff"],
html[data-theme="light"] .site-header svg [fill="#FFF"],
html[data-theme="light"] .site-header svg [fill="#ffffff"],
html[data-theme="light"] .site-header svg [fill="#FFFFFF"],
html[data-theme="light"] footer svg [fill="white"],
html[data-theme="light"] footer svg [fill="#fff"],
html[data-theme="light"] footer svg [fill="#FFF"],
html[data-theme="light"] footer svg [fill="#ffffff"],
html[data-theme="light"] footer svg [fill="#FFFFFF"] {
  fill: #0c1525;
}

/* Chart labels drawn as SVG <text fill="white"> (X-Ray / Wrapped donuts, gauges). */
html[data-theme="light"] svg text[fill="white"],
html[data-theme="light"] svg text[fill="#fff"],
html[data-theme="light"] svg text[fill="#ffffff"] {
  fill: #0c1525;
}

/* Leaflet controls (crypto-map) */
html[data-theme="light"] .leaflet-container { background: #e9edf3; }

/* ---------- 3. Toggle button ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-inline-start: 8px;
  padding: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: transparent;
  color: var(--text, rgba(255, 255, 255, 0.72));
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  color: var(--text-bright, #fff);
  border-color: var(--border-hover, rgba(255, 255, 255, 0.16));
}
.theme-toggle:focus-visible {
  outline: 2px solid #6bb9ec;
  outline-offset: 2px;
}
html[data-theme="light"] .theme-toggle:focus-visible { outline-color: #273dd2; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* Show the icon of the theme you would switch TO. */
.theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }
html[data-theme="light"] .theme-toggle .tt-moon { display: block; }

/* Pages without the shared header get a floating button. */
.theme-toggle.theme-toggle--floating {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 1400;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 50%;
  background: var(--bg, #0c1525);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
html[data-theme="light"] .theme-toggle.theme-toggle--floating {
  box-shadow: 0 4px 16px rgba(12, 21, 37, 0.12);
}

/* Mobile: the header row is logo + lang + toggle + burger. */
@media (max-width: 768px) {
  .site-header .theme-toggle { width: 34px; height: 34px; margin-inline-start: 6px; }
}

/* Suppress transition flashes for the single frame of a switch. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

@media print {
  .theme-toggle { display: none !important; }
}