/* ==========================================================================
   Dark theme: hand-tuned overrides, loaded after the generated dark-auto.css.
   Active when <html data-theme="dark"> (set by js/site-ui.js).
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;
  --ss-dark-page: #0b1020;
  --ss-dark-raise: #131a2b;
}

:root[data-theme="dark"] body {
  color: #cbd5e1;
  background-color: var(--ss-dark-page);
}

/* page canvas and deeper shadows for the redesigned pages */
:root[data-theme="dark"] .home {
  background: var(--ss-dark-page);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 22px 44px -18px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .home .h-hero {
  background: #0d1325;
}

/* faint dot grid in heroes: light dots instead of dark ones */
:root[data-theme="dark"] .home .h-hero::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
}

/* ---------- shared header ---------- */
:root[data-theme="dark"] #ss-header {
  background: rgba(11, 16, 32, 0.8);
}

:root[data-theme="dark"] #ss-header.is-scrolled {
  background: rgba(11, 16, 32, 0.94);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
}

/* the "recognised by" badges are JPEGs on white: keep them on a light chip */
:root[data-theme="dark"] #ss-header .ssh-badges {
  background: #f1f5f9;
}

/* ---------- images that are line art on white ---------- */
:root[data-theme="dark"] .home img[src*="KeyboardLayout"],
:root[data-theme="dark"] .home img[src*="SuperMalar/"] {
  border-radius: 8px;
}

/* (the shared footer is a navy panel in both themes and styles itself: includes/footer.html) */

/* the header tagline is SVG text with a fixed dark green fill */
:root[data-theme="dark"] #ss-header .ssh-tagline text {
  fill: #7fbf8b;
}

/* ---------- Smart Village page (smartVillagedes.html) ---------- */
/* --sv-ink is both the text colour and the fill of its dark panels; in dark mode the
   text flips light (generated) while the panels keep a deep green */
:root[data-theme="dark"] .sv {
  --sv-panel: #0f2419;
}

/* ---------- inline text colours that are too dark on a dark page ---------- */
/* matched as "color:" only (not "background-color:") */
:root[data-theme="dark"] [style^="color: #495057"],
:root[data-theme="dark"] [style*=" color: #495057"],
:root[data-theme="dark"] [style*=";color: #495057"],
:root[data-theme="dark"] [style^="color: #333"],
:root[data-theme="dark"] [style*=" color: #333"],
:root[data-theme="dark"] [style*=";color: #333"] {
  color: #b8c2d4 !important;
}

:root[data-theme="dark"] [style^="color: #4338ca"],
:root[data-theme="dark"] [style*=" color: #4338ca"],
:root[data-theme="dark"] [style*=";color: #4338ca"],
:root[data-theme="dark"] [style^="color: #4f46e5"],
:root[data-theme="dark"] [style*=" color: #4f46e5"],
:root[data-theme="dark"] [style*=";color: #4f46e5"] {
  color: #a5b4fc !important;
}

/* the lime offer card keeps its bright background, so it keeps the original dark ink */
:root[data-theme="dark"] .sv .sv-offer {
  --sv-ink: #0e1a14;
  --sv-muted: #3d4a43;
  color: #0e1a14;
}

:root[data-theme="dark"] .sv .sv-offer h3 {
  color: #0e1a14 !important;
}

:root[data-theme="dark"] .sv .sv-offer small {
  color: rgba(14, 26, 20, 0.7);
}

:root[data-theme="dark"] .sv .sv-offer::after {
  border-color: rgba(14, 26, 20, 0.08);
}

/* header accent (active link, hovers) a step lighter on navy */
:root[data-theme="dark"] #ss-header {
  --ssh-accent: #8b9cf7;
  --ssh-accent-soft: rgba(139, 156, 247, 0.12);
}