/* Spark + Stone — Dark Mode Overrides
   Applied when body has class "dark-mode".
   Covers all variable systems used across the site. */

/* ── Brand.css variable system (--s900, --s800, etc.) ── */
body.dark-mode {
  --s900: #191e16; --s800: #232a1e; --s750: #2a3224; --s700: #333d2c;
  --s600: #4a5940; --s500: #6b7d5e; --s400: #8fa083; --s300: #b0bfa6;
  --s200: #d4dccf; --s100: #edf0ea;
  --text: #edf0ea; --text2: #c4d4bc; --muted: #b8c9b0; --dim: #7a8f6e;
  --spark: #e8d5a0; --spark-dim: #c4b27a; --spark-bright: #f5e8c0;
  --ok: #7aab8c; --danger: #d4967a; --info: #7898a8; --warn: #c9a84c;
}

/* ── Article variable system (--parchment, --ink, etc.) ── */
body.dark-mode {
  --parchment: #191e16;
  --parchment-deep: #232a1e;
  --paper: #1e2418;
  --paper-warm: #222820;
  --sage-charcoal: #b0bfa6;
  --sage: #8a9577;
  --sage-light: #4a5940;
  --sage-mist: #2a3224;
  --gold-light: #e8d5a0;
  --gold-mid: #d4b87f;
  --gold-soft: #3d3520;
  --coral-soft: #d99378;
  --coral-mist: #3a2820;
  --ink: #edf0ea;
  --ink-soft: #c4d4bc;
  --ink-mute: #8a9577;
  --rule: #333d2c;
  --rule-soft: #2a3224;
  --highlight: #3d3520;
}

/* ── CTA / pricing variable system (--beige, --bg, etc.) ── */
body.dark-mode {
  --beige: #232a1e;
  --beige-mid: #2a3224;
  --sand: #b0bfa6;
  --cream: #191e16;
  --warm-white: #191e16;
  --bg: #191e16;
  --bg-cream: #191e16;
  --bg-primary: #191e16;
  --bg-secondary: #232a1e;
  --bg-card: #2a3224;
  --bg-highlight: #333d2c;
  --text-primary: #edf0ea;
  --text-secondary: #c4d4bc;
  --text-muted: #8a9577;
  --border: #333d2c;
  --white: #191e16;
}

/* ── Op-zone variable overrides ── */
body.dark-mode {
  --sage-pale: #2a3224;
  --coral-pale: #3a2820;
  --lemon: #c4b27a;
  --lemon-pale: #3d3520;
}

/* ── Dashboard variables ── */
body.dark-mode {
  --card: #232a1e;
  --card-border: #333d2c;
}

/* ── Global element overrides ── */
body.dark-mode {
  background: #191e16;
  color: #edf0ea;
}

/* Navbar */
body.dark-mode .site-header,
body.dark-mode header[style*="background:#FAF6F1"] {
  background: rgba(25,30,22,0.94) !important;
  border-bottom-color: #333d2c !important;
}

body.dark-mode .site-header a[style*="color:#4B5442"],
body.dark-mode .site-header span[style*="color:#4B5442"] {
  color: #edf0ea !important;
}

body.dark-mode .site-header a[style*="color:#5a5f52"],
body.dark-mode nav a[style*="color:#5a5f52"] {
  color: #b0bfa6 !important;
}

body.dark-mode .site-header span[style*="color:#d4b87f"] {
  color: #e8d5a0 !important;
}

/* Footer stays dark sage in both modes - no change needed */

/* Cards and bordered elements */
body.dark-mode .card,
body.dark-mode [class*="card"] {
  border-color: #333d2c;
}

/* Tables */
body.dark-mode table {
  border-color: #333d2c;
}
body.dark-mode th {
  background: #232a1e;
  color: #edf0ea;
}
body.dark-mode td {
  border-color: #333d2c;
  color: #c4d4bc;
}

/* Code blocks */
body.dark-mode pre,
body.dark-mode code {
  background: #232a1e;
  color: #c4d4bc;
}

/* Horizontal rules */
body.dark-mode hr {
  border-color: #333d2c;
}

/* Links */
body.dark-mode a:not([style]) {
  color: #e8d5a0;
}

/* Blockquotes and callouts */
body.dark-mode blockquote {
  border-left-color: #4a5940;
  background: #232a1e;
  color: #c4d4bc;
}

/* ── Nav + Footer: always light (logo reads on #f7f5f0 background) ── */
body.dark-mode .ss-nav,
body.dark-mode .ss-nav * {
  /* let nav.js inline styles win — do NOT override */
}
/* Explicitly lock nav to light — fully borderless */
.ss-nav {
  background: #f7f5f0 !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #2C2C2A !important;
}
.ss-footer {
  background: #f7f5f0 !important;
  border-top-color: #cfc6ae !important;
}

/* ── Homepage hero buttons in dark mode ──
   Primary is a gold fill, so its text must stay dark for contrast.
   Ghost is outlined on dark, so its text stays light. */
body.dark-mode .btn-primary {
  color: #2a2e25 !important;
}
body.dark-mode .btn-ghost {
  color: var(--text2, #c4d4bc) !important;
}

/* ── Homepage (index.html) ── */
body.dark-mode nav:not(.ss-nav) {
  background: rgba(25,30,22,0.92) !important;
  border-bottom-color: #333d2c !important;
}
body.dark-mode .hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(232,213,160,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 70%, rgba(90,107,79,0.08) 0%, transparent 60%) !important;
}
body.dark-mode .slide-1 {
  background: linear-gradient(160deg, #2a3224 0%, #333d2c 50%, #3d4a35 100%) !important;
}
body.dark-mode .slide-2 {
  background: linear-gradient(145deg, #2a3028 0%, #333d38 50%, #3a4240 100%) !important;
}
body.dark-mode .slide-3 {
  background: linear-gradient(150deg, #322c20 0%, #3d3528 50%, #4a4030 100%) !important;
}
body.dark-mode .slide-caption {
  background: rgba(35,42,30,0.88) !important;
  border-top-color: rgba(232,213,160,0.15) !important;
}
body.dark-mode .modal,
body.dark-mode .ss-modal {
  background: var(--s800) !important;
  border-color: var(--s700) !important;
}
body.dark-mode .site-header[style*="background:#FAF6F1"] {
  background: rgba(25,30,22,0.94) !important;
  border-bottom-color: #333d2c !important;
}
body.dark-mode .site-header a[style*="color:#5a5f52"] {
  color: #b0bfa6 !important;
}
body.dark-mode .site-header a[style*="color:#5a5f52"]:hover {
  color: #e8d5a0 !important;
}

/* Learn / article nav (old-style inline nav, not ss-nav) */
body.dark-mode nav:not(.ss-nav)[style*="background: rgba(247"],
body.dark-mode nav:not(.ss-nav)[style*="background:rgba(247"] {
  background: rgba(25,30,22,0.94) !important;
  border-bottom-color: #333d2c !important;
}

/* Dashboards — light parchment main area in light; deeper in dark */
body.dark-mode {
  --bg: #191e16;
  --card: #232a1e;
  --card-alt: #2a3224;
  --border: #333d2c;
  --border-mid: #4a5940;
  --text-primary: #edf0ea;
  --text-secondary: #c4d4bc;
  --text-dim: #8a9577;
  --text-muted: #6b7d5e;
  --sage-100: #232a1e;
  --sage-200: #333d2c;
}

/* Print: always light */
@media print {
  body.dark-mode {
    --parchment: #f7f5f0;
    --ink: #2a2e25;
    background: white !important;
    color: #2a2e25 !important;
  }
}