/* LSL Vision — theme tokens.
 * Dark is the default (Vision's native neon look, unchanged).
 * Light matches the LSL Families / Portal siblings: light gray page, white
 * cards, dark text, maroon-red primary. The toggle flips html.light and every
 * color resolves through these variables, so the switch is instant.
 */
:root {
  color-scheme: dark;
  --bg: #0b0f14; --surface: #11161d; --surface-2: #0b0f14;
  --border: #1e2733; --border-2: #1a222d; --border-3: #243042;
  --hover: #151c25; --hover-2: #182029;
  --text: #e6edf3; --legend: #cdd6df; --muted-2: #9fb0c0; --muted: #8a97a4;
  --note: #9aa7b4; --dim: #6b7785; --faint: #4d5965;
  --cyan: #00e5ff; --cyan-2: #4af0ff; --magenta: #ff2bd6; --green: #29ffa6;
  --orange: #ff9d3c; --yellow: #eaff3a; --pink: #ff5c8a;
  --btn-fg: #04121a;
  --ok-bg: #11201a; --ok-border: #1f5a44;
  --danger-bg: #1a0f12; --danger-border: #5a2530; --danger-btn-bg: #3a1014;
  --danger-btn-fg: #ff8aa6; --danger-btn-hover-bg: #511620; --danger-btn-hover-fg: #ffd0db;
  --shadow: rgba(0, 229, 255, 0.06);
  --grid-empty: #0d141c;
  --chart-fill: rgba(0, 229, 255, 0.12);
}
:root.light {
  color-scheme: light;
  --bg: #f4f4f4; --surface: #ffffff; --surface-2: #f1f3f5;
  --border: #dde2e7; --border-2: #e6eaef; --border-3: #d2d8df;
  --hover: #eef2f6; --hover-2: #e9eef3;
  --text: #1a1a1a; --legend: #2a333d; --muted-2: #46505b; --muted: #5b6671;
  --note: #5b6671; --dim: #6b7785; --faint: #9aa3ac;
  --cyan: #9b1c1c; --cyan-2: #7a1515; --magenta: #b3158f; --green: #0a8f5f;
  --orange: #c2660a; --yellow: #8a7d00; --pink: #c01f54;
  --btn-fg: #ffffff;
  --ok-bg: #eafaf1; --ok-border: #b8e6cf;
  --danger-bg: #fdecec; --danger-border: #e6b8b8; --danger-btn-bg: #fbe3e3;
  --danger-btn-fg: #9b1c1c; --danger-btn-hover-bg: #f6cccc; --danger-btn-hover-fg: #7a1515;
  --shadow: rgba(0, 0, 0, 0.08);
  --grid-empty: #e9edf1;
  --chart-fill: rgba(155, 28, 28, 0.10);
}

/* Theme toggle pill — mirrors the sibling apps' nav button */
#dm-toggle {
  background: none; border: 1px solid var(--border-3); color: var(--dim);
  padding: 4px 10px; border-radius: 12px; font-size: 12px; cursor: pointer;
  line-height: 1; margin-left: 14px; vertical-align: middle;
}
#dm-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
#dm-toggle.floating {
  position: fixed; bottom: 18px; right: 18px; z-index: 2147483000;
  background: var(--surface); margin-left: 0; padding: 7px 12px; font-size: 13px;
}

/* Light mode: lean into the Families red/charcoal character */
:root.light th { background: var(--cyan); color: #ffffff; border-bottom-color: var(--cyan); }
:root.light th:hover { color: #ffffff; }
:root.light h2 { color: var(--cyan); }
:root.light .ptitle { color: var(--cyan); }