/* ==========================================================================
   Dark theme — toggled via html.smi-dark
   Full-site dark: surfaces, cards, chrome, and readable text
   ========================================================================== */
html.smi-dark {
  color-scheme: dark;

  /* Typography — readable on dark (wins over Customizer :root --ch/--cs) */
  --ch: #eef1f8;
  --cs: #a8b0c4;
  --ct: var(--ch);
  --cm: var(--cs);

  /* Surfaces — navy family */
  --cb: #0e1324;
  --ce: #2a3350;
  --surface: #151b2e;
  --surface-elevated: #1c243c;

  /* Soft/cream tokens used as light fills → dark fills */
  --brand-soft: #2a3350;
  --brand-cream: #151b2e;

  /* Cards & stat fades */
  --card: #1c243c;
  --card-frost: rgba(14, 19, 36, 0.92);
  --stat-fade: #151b2e;
  --stat-fade-soft: rgba(21, 27, 46, 0.82);
  --stat-fade-mid: rgba(21, 27, 46, 0.35);

  /* Accents follow secondary (gold) */
  --brand-light: var(--brand-secondary);
  --brand-highlight: var(--brand-secondary);
  --c3: var(--brand-highlight);
  --shadow-brand: rgba(0, 0, 0, 0.45);
}

html.smi-dark body,
html.smi-dark main,
html.smi-dark .smi-about,
html.smi-dark .smi-init,
html.smi-dark .smi-reviews,
html.smi-dark .smi-stmt-title,
html.smi-dark .smi-contrib,
html.smi-dark .smi-home-cta {
  background: var(--cb);
  color: var(--ct);
}

html.smi-dark .smi-post-cta {
  background: linear-gradient(135deg, var(--cb) 0%, var(--surface-elevated) 100%);
  color: var(--ct);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html.smi-dark .smi-post-cta h2 {
  color: var(--ch);
}

html.smi-dark .smi-post-cta p {
  color: var(--cs);
  opacity: 1;
}

html.smi-dark .smi-post-cta .smi-btn-primary::after {
  background: var(--surface);
}

/* ── Footer ── */
html.smi-dark .smi-ftr {
  background: var(--cb);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

html.smi-dark .smi-ftr-c,
html.smi-dark .smi-ftr-l {
  color: var(--cs);
}

html.smi-dark .smi-ftr-l:hover {
  color: var(--ch);
}

html.smi-dark .smi-ftr-s a {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--cs);
}

html.smi-dark .smi-ftr-s a:hover {
  background: var(--c2);
  border-color: var(--c2);
  color: var(--cbt);
}

html.smi-dark .smi-pagination .page-numbers {
  background: var(--surface-elevated);
  border-color: var(--ce);
  color: var(--ct);
}

html.smi-dark .smi-pagination .page-numbers:hover {
  background: var(--c1);
  border-color: var(--c1);
  color: var(--cw);
}

html.smi-dark .smi-pagination .page-numbers.current {
  background: var(--c2);
  border-color: var(--c2);
  color: var(--cbt);
}

html.smi-dark .smi-pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  color: var(--cs);
}

/* ── Header ── */
html.smi-dark .smi-hdr.smi-stuck .smi-hdr-bar,
html.smi-dark .smi-hdr.smi-inner .smi-hdr-bar {
  background: var(--surface);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

html.smi-dark .smi-hdr.smi-stuck .smi-hdr-nav > li > a,
html.smi-dark .smi-hdr.smi-inner .smi-hdr-nav > li > a,
html.smi-dark .smi-hdr.smi-stuck .smi-hdr-act .smi-btn-a11y,
html.smi-dark .smi-hdr.smi-inner .smi-hdr-act .smi-btn-a11y {
  color: var(--ct);
}

html.smi-dark .smi-hdr.smi-stuck .smi-nav-tog span,
html.smi-dark .smi-hdr.smi-inner .smi-nav-tog span {
  background: var(--ct);
}

html.smi-dark .smi-sub {
  background: var(--surface-elevated);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

html.smi-dark .smi-sub li a {
  color: var(--ct);
}

html.smi-dark .smi-sub li a:hover {
  background: var(--ce);
  color: var(--brand-light);
}

/* ── Wave ── */
html.smi-dark .smi-wave__top {
  background: var(--c1);
}

html.smi-dark .smi-wave__accent {
  background: var(--c2);
}

/* ── Homepage sections ── */
html.smi-dark .smi-about-lbl,
html.smi-dark .smi-init-hd h2,
html.smi-dark .smi-isl h3,
html.smi-dark .smi-contrib-head h2,
html.smi-dark .smi-srv-hd h2 {
  color: var(--ct);
}

html.smi-dark .smi-about-ttl {
  color: var(--c2);
}

html.smi-dark .smi-about-desc,
html.smi-dark .smi-srv-desc,
html.smi-dark .smi-init-hd p,
html.smi-dark .smi-isl p {
  color: var(--cm);
}

html.smi-dark .smi-stmt-title h2 {
  color: var(--cw);
}

html.smi-dark .smi-stmt-sub {
  color: var(--brand-secondary-light);
}

html.smi-dark .smi-srv,
html.smi-dark .smi-news,
html.smi-dark .smi-partners,
html.smi-dark .smi-reviews-g {
  background: var(--surface);
}

html.smi-dark .smi-news-lbl,
html.smi-dark .smi-news-hd-txt h2 {
  color: var(--brand-light);
}

html.smi-dark .smi-news-banner h2,
html.smi-dark .smi-reviews-hd h2,
html.smi-dark .smi-nc-t {
  color: var(--ct);
}

html.smi-dark .smi-reviews-badge,
html.smi-dark .smi-rev-card {
  background: var(--surface-elevated);
  border-color: rgba(255, 255, 255, 0.06);
}

html.smi-dark .smi-rev-name {
  color: var(--ct);
}

html.smi-dark .smi-rev-card::before {
  color: rgba(255, 255, 255, 0.08);
}

html.smi-dark .smi-partners-hd h2 {
  color: var(--ch);
}

html.smi-dark .smi-partners-sub {
  color: var(--cs);
}

html.smi-dark .smi-partners-item {
  background: var(--surface-elevated);
}

html.smi-dark .smi-contrib {
  background: var(--cb);
}

html.smi-dark .smi-nc {
  background: transparent;
  box-shadow: none;
}

html.smi-dark .smi-nc:hover .smi-nc-t {
  color: var(--brand-light);
}

/* Stats cards — frosted panel + gradients */
html.smi-dark .smi-s-card-c {
  background: rgba(14, 19, 36, 0.92);
}

html.smi-dark .smi-s-card:nth-child(odd)::after {
  background: linear-gradient(
    to top,
    var(--surface) 0%,
    var(--surface) 30%,
    rgba(21, 27, 46, 0.82) 52%,
    rgba(21, 27, 46, 0.35) 72%,
    transparent 100%
  );
}

html.smi-dark .smi-s-card:nth-child(even)::after {
  background: linear-gradient(
    to bottom,
    var(--surface) 0%,
    var(--surface) 30%,
    rgba(21, 27, 46, 0.82) 52%,
    rgba(21, 27, 46, 0.35) 72%,
    transparent 100%
  );
}

html.smi-dark .smi-s-card-n {
  color: var(--brand-light);
}

html.smi-dark .smi-s-card-l {
  color: var(--cm);
}

html.smi-dark .smi-statbar {
  background: linear-gradient(180deg, var(--surface) 0%, var(--cb) 100%);
}

html.smi-dark .smi-statbar-txt h2 {
  color: var(--ct);
}

html.smi-dark .smi-statbar-txt p {
  color: var(--brand-highlight);
}

/* Slider / swiper dots */
html.smi-dark .smi-slider-dots .smi-dot,
html.smi-dark .smi-init-dots .smi-dot,
html.smi-dark .smi-contrib-dots .smi-dot,
html.smi-dark .smi-swiper-dots .smi-dot {
  background: var(--ce);
}

html.smi-dark .smi-slider-dots .smi-dot.smi-on,
html.smi-dark .smi-init-dots .smi-dot.smi-on,
html.smi-dark .smi-contrib-dots .smi-dot.smi-on,
html.smi-dark .smi-swiper-dots .smi-dot.smi-on,
html.smi-dark .smi-swiper-dots .swiper-pagination-bullet-active {
  background: var(--c2);
}

/* ── Inner pages ── */
html.smi-dark .smi-pg-hero::after {
  background: linear-gradient(to top, var(--cb), transparent);
}

html.smi-dark .smi-about-intro,
html.smi-dark .smi-pg-banner {
  background: var(--surface);
  border-bottom-color: var(--c1);
}

html.smi-dark .smi-pg-banner h1,
html.smi-dark .smi-about-intro-ttl,
html.smi-dark .smi-about-intro-content blockquote {
  color: var(--ct);
}

html.smi-dark .smi-pg-banner p,
html.smi-dark .smi-about-intro-meta {
  color: var(--cm);
}

html.smi-dark .smi-about-intro-qmark {
  color: var(--brand-light);
}

html.smi-dark .smi-about-intro-visual {
  background: var(--surface-elevated);
}

html.smi-dark .smi-ambition-box {
  background: var(--surface-elevated);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
}

html.smi-dark .smi-ambition-nav {
  background: var(--surface);
  color: var(--ct);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html.smi-dark .smi-ambition-nav:hover {
  background: var(--c1);
  color: var(--cw);
}

html.smi-dark .smi-ambition-item:hover .smi-ambition-num,
html.smi-dark .smi-ambition-item.smi-on .smi-ambition-num {
  background: var(--c1);
  box-shadow: 0 4px 12px var(--shadow-brand);
}

html.smi-dark .smi-value-card-face {
  background: var(--surface-elevated);
}

html.smi-dark .smi-value-card-front h3 {
  color: var(--brand-light);
}

html.smi-dark .smi-value-card .smi-v-icon {
  background: var(--c1);
}

html.smi-dark .smi-proj-card-bar {
  background: var(--surface-elevated);
  color: var(--ct);
}

html.smi-dark .smi-proj-card:hover .smi-proj-card-bar {
  background: var(--c1);
  color: var(--cw);
}

/* Initiative / FAQ / news cards */
html.smi-dark .smi-init-card,
html.smi-dark .smi-faq-item,
html.smi-dark .smi-ng-card {
  background: var(--surface-elevated);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

html.smi-dark .smi-init-card-body h2,
html.smi-dark .smi-ng-card-t {
  color: var(--ch);
}

html.smi-dark .smi-init-card-body p,
html.smi-dark .smi-ng-card-d {
  color: var(--cm);
}

html.smi-dark .smi-faq-q {
  background: var(--surface-elevated);
  color: var(--ct);
}

html.smi-dark .smi-faq-q:hover,
html.smi-dark .smi-faq-item.smi-open .smi-faq-q {
  background: var(--surface);
}

html.smi-dark .smi-faq-a {
  background: var(--cb);
  color: var(--cm);
}

html.smi-dark .smi-faq-q i {
  color: var(--brand-light);
}

/* Single post */
html.smi-dark .smi-post-lead {
  border-bottom-color: var(--ce);
}

html.smi-dark .smi-post-prose {
  color: var(--ct);
}

html.smi-dark .smi-post-prose h2,
html.smi-dark .smi-post-prose h3,
html.smi-dark .smi-post-prose strong,
html.smi-dark .smi-post-prose blockquote {
  color: var(--ch);
}

html.smi-dark .smi-post-prose blockquote {
  background: var(--surface-elevated);
}

html.smi-dark .smi-post-prose a:hover {
  color: var(--brand-light);
}

html.smi-dark .smi-post-tag {
  background: var(--ce);
  color: var(--ct);
}

html.smi-dark .smi-post-tag:hover {
  background: var(--c1);
  color: var(--cw);
}

html.smi-dark .smi-post-share a {
  background: var(--ce);
  color: var(--ct);
}

html.smi-dark .smi-post-share a:hover {
  background: var(--c1);
  color: var(--cw);
}

html.smi-dark .smi-post-share span {
  color: var(--cm);
}

html.smi-dark .smi-post-nav a {
  background: var(--surface-elevated);
  color: var(--ct);
}

html.smi-dark .smi-post-nav a:hover {
  background: var(--surface);
}

html.smi-dark .smi-post-nav a strong {
  color: var(--ch);
}

html.smi-dark .smi-post-related {
  background: var(--cb);
}

html.smi-dark .smi-post-related h2 {
  color: var(--ch);
}

html.smi-dark .smi-post-cover figcaption {
  background: var(--surface-elevated);
  color: var(--cm);
}

html.smi-dark .smi-post-side-card {
  background: var(--surface-elevated);
  border-color: var(--ce);
}

html.smi-dark .smi-post-side-card h2 {
  color: var(--ch);
}

html.smi-dark .smi-btn-more {
  color: var(--brand-light);
}

/* Service sidebar */
html.smi-dark .smi-srv-side-list a,
html.smi-dark .smi-srv-side-list a:hover,
html.smi-dark .smi-srv-side-list .smi-current a,
html.smi-dark .smi-srv-side-all {
  color: var(--ct);
}

html.smi-dark .smi-srv-side-list a:hover,
html.smi-dark .smi-srv-side-all:hover {
  color: var(--brand-light);
}

html.smi-dark .smi-srv-side-icon {
  background: var(--ce);
  color: var(--brand-light);
}

html.smi-dark .smi-srv-side-list .smi-current .smi-srv-side-icon {
  background: var(--c1);
  color: var(--cw);
}

/* TOC */
html.smi-dark .smi-toc-list a:hover,
html.smi-dark .smi-toc-list a.smi-active {
  color: var(--brand-light);
}

/* ── Theme toggle icons ── */
html.smi-dark .smi-btn-a11y .smi-theme-icon--moon {
  display: none;
}

html:not(.smi-dark) .smi-btn-a11y .smi-theme-icon--sun {
  display: none;
}

html.smi-dark .smi-btn-a11y .smi-theme-icon--sun {
  display: inline-block;
}

html:not(.smi-dark) .smi-btn-a11y .smi-theme-icon--moon {
  display: inline-block;
}
