/* MsgFirst light/dark theme system — two modes.
   navy = light (default), slate = dark (graphite/silver).
   Set via data-theme on <html>; no attr = navy.
   Slate (light brand) puts dark text on brand surfaces via --mf-on-brand. */

:root,
[data-theme="navy"] {
  --mf-brand: #2f4a6b;
  --mf-brand-dark: #243a54;
  --mf-brand-darker: #1c2e42;
  --mf-brand-deep: #162536;
  --mf-brand-mid: #3f5f84;
  --mf-brand-soft: #6a87a8;
  --mf-brand-300: #92a8c2;
  --mf-brand-200: #b5c4d6;
  --mf-brand-100: #d5dde8;
  --mf-brand-50: #e8edf4;
  --mf-gold: #80622f;
  --mf-gold-dark: #74592f;
  --mf-gold-50: #f5e9d5;
  --mf-bg: #faf6ee;
  --mf-bg-2: #f1ebdd;
  --mf-surface: #fffef9;
  --mf-border: #ddd8cc;
  --mf-border-2: #c9c3b4;
  --mf-border-3: #eae5d9;
  --mf-text: #1a1e26;
  --mf-text-0: #2a2f38;
  --mf-text-1: #454a54;
  --mf-text-2: #555b66;
  --mf-text-3: #6f7580;
  --mf-text-4: #7c828f;
  --mf-ring: rgba(47, 74, 107, 0.25);
  --mf-brand-rgb: 47, 74, 107;
  --mf-on-brand: #ffffff;
  --mf-on-brand-rgb: 255, 255, 255;
}

[data-theme="slate"] {
  --mf-brand: #a3aab4;
  --mf-brand-dark: #8b929d;
  --mf-brand-darker: #7d848f;
  --mf-brand-deep: #5e6570;
  --mf-brand-mid: #b2b9c2;
  --mf-brand-soft: #3d424b;
  --mf-brand-300: #4f555f;
  --mf-brand-200: #c3c9d1;
  --mf-brand-100: #262a31;
  --mf-brand-50: #1e2127;
  --mf-gold: #cbd0d7;
  --mf-gold-dark: #99a0aa;
  --mf-gold-50: #23262c;
  --mf-bg: #151619;
  --mf-bg-2: #1c1e22;
  --mf-surface: #212327;
  --mf-border: #34373d;
  --mf-border-2: #464a52;
  --mf-border-3: #26282d;
  --mf-text: #e8eaee;
  --mf-text-0: #d9dce1;
  --mf-text-1: #b9bdc4;
  --mf-text-2: #9ea2aa;
  --mf-text-3: #82868e;
  --mf-text-4: #7c818a;
  --mf-ring: rgba(163, 170, 180, 0.3);
  --mf-brand-rgb: 163, 170, 180;
  --mf-on-brand: #14161a;
  --mf-on-brand-rgb: 20, 22, 26;
}

/* ── Slate (light brand): brand surfaces need dark text.
   Site rules already use color:var(--mf-on-brand); these catch .text-white
   leftovers and light-button treatments. ── */
[data-theme="slate"] .bg-blue-600,
[data-theme="slate"] .hover\:bg-blue-700:hover,
[data-theme="slate"] .bg-blue-600 .text-white,
[data-theme="slate"] .result-box,
[data-theme="slate"] .result-box .text-white,
[data-theme="slate"] .chdr .text-white,
[data-theme="slate"] .msg.me .mb .text-white {
  color: var(--mf-on-brand);
}

[data-theme="slate"] .cta-block p {
  color: #2c333c;
}

[data-theme="slate"] .cta-btn-white {
  background: var(--mf-text-0);
  color: var(--mf-on-brand);
}

[data-theme="slate"] .cta-btn-white:hover {
  background: var(--mf-text-1);
}

/* ── Header light/dark toggle (sun/moon) ──
   Light mode (navy): show moon = switch to dark.
   Dark mode (slate): show sun = switch to light. */
#themeToggle {
  display: flex;
  align-items: center;
}

#themeToggle .th-sun {
  display: none;
}

[data-theme="slate"] #themeToggle .th-sun {
  display: block;
}

[data-theme="slate"] #themeToggle .th-moon {
  display: none;
}