/* Optional light appearance. The default dark palette remains in style.css. */
html[data-theme="light"] {
  --bg: #f5f7f4;
  --panel: #ffffff;
  --panel2: #e9efea;
  --text: #182321;
  --muted: #52615e;
  --line: #d3dcd6;
  --accent: #276b3d;
  --blue: #176da1;
  --orange: #9a4f11;
  --pink: #8c4c83;
  --green: #16745d;
  color-scheme: light;
}


/* Compact theme control; its glyph is hidden from assistive technology. */
.theme-toggle {
  display: inline-flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
}
.theme-toggle span { display: block; }
@media (max-width: 800px) {
  .theme-toggle { flex-basis: 36px; width: 36px; height: 36px; }
  .header { gap: 8px; }
  .header > .brand, .header > .mode-nav { min-width: 0; }
}
@media (max-width: 420px) {
  .theme-toggle { flex-basis: 34px; width: 34px; height: 34px; }
  .header { padding-inline: 4%; gap: 5px; }
  .brand { gap: 8px; font-size: 18px; }
  .brand-mark { font-size: 28px; }
  .mode-nav { padding: 3px; gap: 2px; }
  .mode-nav a { padding: 7px 8px; font-size: 12px; }
  .index-trigger { padding-left: 7px; }
}

html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .header { background: #f5f7f4ed; }
html[data-theme="light"] .mode-nav a[aria-current="page"] { color: #fff; }
html[data-theme="light"] .index-panel {
  box-shadow: -24px 18px 55px rgb(26 44 33 / 14%);
}
html[data-theme="light"] .reading-nav a { border-bottom-color: var(--line); }
html[data-theme="light"] .article-body p,
html[data-theme="light"] .article-body li { color: #34423e; }
html[data-theme="light"] .big-num { color: #365b42; }
html[data-theme="light"] .metric-big { color: #53645f; }

/* Keep diagnostic radiographs faithful; only surrounding interface surfaces change. */
html[data-theme="light"] .article-body [data-visual],
html[data-theme="light"] .forward-node,
html[data-theme="light"] .training-selection,
html[data-theme="light"] .takeaway,
html[data-theme="light"] .index-panel {
  background-color: var(--panel);
}
html[data-theme="light"] .forward-node.active { background-color: #e8f1e9; }
html[data-theme="light"] .contrast-summary { background-color: #e9f2e8; }
html[data-theme="light"] .scan-label {
  background: #f7faf7ed;
  border-color: #9aaf9b;
  box-shadow: 0 15px 42px rgb(22 38 29 / 15%);
}
html[data-theme="light"] .image-topline { color: #e1e9e5; }
html[data-theme="light"] .slide-bottom {
  background: #f5f7f4f5;
  box-shadow: 0 -8px 28px rgb(26 44 33 / 7%);
}
html[data-theme="light"] dialog::backdrop { background: rgb(19 31 25 / 58%); }

/* SVG labels and construction lines use explicit dark-theme colors in the source. */
html[data-theme="light"] svg [fill="#eef2ed"] { fill: #182321 !important; }
html[data-theme="light"] svg [fill="#a1adae"] { fill: #52615e !important; }
html[data-theme="light"] svg [fill="#b9c4c6"] { fill: #dce5e1 !important; }
html[data-theme="light"] svg [fill="#ddd"] { fill: #52615e !important; }
html[data-theme="light"] svg [fill="#fff"] { fill: #52615e !important; }
html[data-theme="light"] svg [fill="#b3f36b"] { fill: #276b3d !important; }
html[data-theme="light"] svg [fill="#6bb9f1"] { fill: #176da1 !important; }
html[data-theme="light"] svg [fill="#a5b5c0"] { fill: #52615e !important; }
html[data-theme="light"] svg [stroke="#263037"],
html[data-theme="light"] svg [stroke="#29333a"],
html[data-theme="light"] svg [stroke="#536067"] { stroke: #cbd5cf !important; }
html[data-theme="light"] svg [stroke="#a1adae"] { stroke: #71817b !important; }
html[data-theme="light"] svg [stroke="#b3f36b"] { stroke: #276b3d !important; }
html[data-theme="light"] svg [stroke="#6bb9f1"] { stroke: #176da1 !important; }
html[data-theme="light"] svg [stroke="#a5b5c0"] { stroke: #52615e !important; }
html[data-theme="light"] svg [stroke="#ddd"],
html[data-theme="light"] svg [stroke="#fff"] { stroke: #63736d !important; }
html[data-theme="light"] svg [fill="#74888f"] { fill: #59716f !important; }
html[data-theme="light"] svg [fill="#52614e"] { fill: #365b42 !important; }

/* CSS-drawn feature maps retain their structure with pale grounds and clear lines. */
html[data-theme="light"] .feature-stack i {
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgb(23 109 161 / 24%) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(23 109 161 / 24%) 9px 10px),
    #e4eef3;
}
html[data-theme="light"] .latent-grid {
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgb(39 107 61 / 29%) 9px 10px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgb(39 107 61 / 29%) 9px 10px),
    #e9f1e7;
}
html[data-theme="light"] .proto-dots i { opacity: .8; }
html[data-theme="light"] .proto-dots i:nth-child(4n) { box-shadow: 0 0 10px rgb(39 107 61 / 22%); }

/* The color legend and data series use distinct, accessible colors on pale paper. */
html[data-theme="light"] .split-bar > div:first-child,
html[data-theme="light"] .split-bar > div:nth-child(2) { color: #fff; }
html[data-theme="light"] .split-bar > div:nth-child(3) { color: #302042; }
html[data-theme="light"] .primary { color: #fff; }
html[data-theme="light"] .skip { color: #fff; }