/* ==========================================================
   Landmark Charter Group — dark theme + theme toggle
   Light tokens live in base.css :root. Loaded last on every page.
   Dark is a soft graphite (not pure black) to keep contrast gentle.
   ========================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1218;
  --page-grad: #0f1218;
  --admin-bg: #0f1218;
  --alt-bg: #12161d;
  --surface: #171b23;
  --surface-grad: #171b23;
  --surface-2: #131720;
  --ink: #e4e8ee;
  --ink-soft: #9aa4b4;
  --line: #272d38;
  --line-soft: #1f242d;
  --row-hover: #1c212a;
  --heading: #f2f4f8;
  --link: #cbb06a;
  --navy-100: #202633;
  --chart-rev: #7893c2;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; flex: none;
  cursor: pointer; padding: 0; background: var(--surface); color: var(--heading); border: 1px solid var(--line);
  transition: border-color .15s, color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--navy-600); color: var(--heading); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.sidebar .theme-toggle { background: rgba(255, 255, 255, .06); color: #dbe3f0; border-color: rgba(255, 255, 255, .18); }
.sidebar .theme-toggle:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 60; box-shadow: var(--shadow-sm); }
.sidebar .theme-toggle { width: 100%; height: 34px; margin-bottom: .6rem; display: inline-flex; gap: .5rem; align-items: center; justify-content: center; font: 600 .8rem var(--font-body); }
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; }

/* ---------- Dark overrides for components with fixed colors ---------- */
:root[data-theme="dark"] .btn-gold { background: #d2b46a; color: #15181f; }
:root[data-theme="dark"] .btn-gold:hover { background: #dec27d; color: #15181f; }
:root[data-theme="dark"] .btn-navy { background: var(--navy-100); color: var(--heading); border-color: var(--line); }
:root[data-theme="dark"] .btn-navy:hover { background: #2a3140; }
:root[data-theme="dark"] .btn-outline:hover, :root[data-theme="dark"] .btn-outline-light:hover { border-color: #4a5365; }
:root[data-theme="dark"] .btn-danger { color: #f08a80; border-color: rgba(240, 138, 128, .45); }
:root[data-theme="dark"] .btn-ghost:hover { background: var(--navy-100); }
:root[data-theme="dark"] .chip.active { background: #d2b46a; color: #15181f; border-color: #d2b46a; }
:root[data-theme="dark"] .seg input:checked + span { background: #2a3140; color: var(--heading); }
:root[data-theme="dark"] .card:hover { border-color: #3a4352; }
:root[data-theme="dark"] .card .icon { background: var(--navy-100); color: #cbb06a; }
:root[data-theme="dark"] .seg span { color: var(--ink-soft); }
:root[data-theme="dark"] .step .num { background: var(--navy-100); }
:root[data-theme="dark"] .tier.featured { border-color: #cbb06a; }
:root[data-theme="dark"] .tier .ribbon { background: #d2b46a; color: #15181f; }
:root[data-theme="dark"] .badge { background: #232a38; color: #b9c4d8; }
:root[data-theme="dark"] .badge.gold { background: #342d18; color: #e3c97f; }
:root[data-theme="dark"] .badge.green { background: #173126; color: #7fd0a6; }
:root[data-theme="dark"] .badge.red { background: #3a1f1d; color: #f2a29a; }
:root[data-theme="dark"] .badge.amber { background: #382a14; color: #eec06f; }
:root[data-theme="dark"] .badge.blue { background: #1c2a45; color: #a6c0ee; }
:root[data-theme="dark"] .badge.gray { background: #232832; color: #a9b2c2; }
:root[data-theme="dark"] .form-error { background: #3a1c1a; border-color: #6a2d28; color: #f4a59d; }
:root[data-theme="dark"] .form-ok { background: #13302a; border-color: #20573f; color: #7fd6ab; }
:root[data-theme="dark"] .success-panel .check { background: #13302a; color: #7fd6ab; }
:root[data-theme="dark"] .demo-note { background: #2a2615; border-color: #52471d; color: #e3c97f; }
:root[data-theme="dark"] .demo-note code { background: #382f17; }
:root[data-theme="dark"] .mode-pill.demo { background: #382a14; color: #eec06f; }
:root[data-theme="dark"] .mode-pill.live { background: #173126; color: #7fd0a6; }
:root[data-theme="dark"] .toast { background: #232a38; border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid #cbb06a; }
:root[data-theme="dark"] .toast.err { border-left-color: var(--danger); }
:root[data-theme="dark"] .summary .line.margin { color: #7fd0a6; }
:root[data-theme="dark"] .kpi::before { background: #cbb06a; }
:root[data-theme="dark"] .bar > i { background: #cbb06a; }
:root[data-theme="dark"] .chart .b.mar { background: #cbb06a; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #6c7686; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: #cbb06a; box-shadow: 0 0 0 3px rgba(203, 176, 106, .18); }
:root[data-theme="dark"] .site-header { background: var(--surface); }
:root[data-theme="dark"] .brand-text span { color: #cbb06a; }
:root[data-theme="dark"] .hero-card { background: var(--surface-2); }
:root[data-theme="dark"] .hero h1 em, :root[data-theme="dark"] .eyebrow { color: #cbb06a; }
:root[data-theme="dark"] .sidebar { background: #0b0e13; border-right: 1px solid var(--line); }
:root[data-theme="dark"] .cta-band { background: #1a2130; }
:root[data-theme="dark"] .cta-band .btn-gold { background: #d2b46a; color: #15181f; }
:root[data-theme="dark"] .site-footer, :root[data-theme="dark"] .auth-side { background: #0b0e13; }
:root[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }