/* Starchan — dark mode overrides */
[data-theme="dark"] {
  --bg:            #111420;
  --bg-post:       #1a1e28;
  --text:          #dde8f4;
  --link:          #d4a84e;
  --visited:       #a07030;
  --hover:         #e8b860;
  --border:        #253b52;
  --header-bg:     rgba(13, 16, 24, 0.82);
  --tabs-bg:       rgba(8, 10, 16, 0.82);
  --accent:        #c8923a;
  --text-dim:      #8fa3b8;
  --bg-highlight:  #2a2500;
  --post-highlight:#3a3a00;
}

/* System-preference dark mode for users who haven't toggled manually */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #111420;
    --bg-post:       #1a1e28;
    --text:          #dde8f4;
    --link:          #d4a84e;
    --visited:       #a07030;
    --hover:         #e8b860;
    --border:        #253b52;
    --header-bg:     rgba(13, 16, 24, 0.82);
    --tabs-bg:       rgba(8, 10, 16, 0.82);
    --accent:        #c8923a;
    --text-dim:      #8fa3b8;
    --bg-highlight:  #2a2500;
    --post-highlight:#3a3a00;
  }
}

/* Marketing page beige token overrides — no light equivalent in dark mode */
[data-theme="dark"] {
  --beige:      #1a1e28;  /* dark card surface (matches --bg-post) */
  --beige-card: #1f2333;  /* slightly lighter card surface */
  --beige-dark: #161a24;  /* deeper section background */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --beige:      #1a1e28;
    --beige-card: #1f2333;
    --beige-dark: #161a24;
  }
}

/* Surface + semantic color token overrides */
[data-theme="dark"] {
  --surface-reply:  #1e2232;
  --surface-sticky: #201e12;
  --bg-alt:         #1a1e2c;
  --color-error:    #f87171;  /* lighter error for dark backgrounds — WCAG AA */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-reply:  #1e2232;
    --surface-sticky: #201e12;
    --bg-alt:         #1a1e2c;
    --color-error:    #f87171;
  }
}

/* Landing — Community section dark mode (beige section → dark) */
[data-theme="dark"] .landing-community {
  background: var(--navy-deep);
}

[data-theme="dark"] .lc-heading h2 {
  color: var(--text-on-dark);
}

[data-theme="dark"] .lc-heading p {
  color: var(--text-muted-dark);
}

[data-theme="dark"] .lc-wave-badge {
  background: rgba(255,255,255,0.05);
  border-color: var(--navy-border);
  color: var(--text-muted-dark);
}

[data-theme="dark"] .lc-wave--active .lc-wave-badge {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
}

[data-theme="dark"] .lc-wave--soon .lc-wave-badge {
  border-color: var(--gold);
  background: rgba(200, 146, 58, 0.12);
  color: var(--text-on-dark);
}

[data-theme="dark"] .lc-wave-label {
  color: var(--text-on-dark);
}

[data-theme="dark"] .lc-wave--locked .lc-wave-label {
  color: var(--text-muted-dark);
}

[data-theme="dark"] .lc-wave-connector {
  background: var(--navy-border);
}

/* Section backgrounds — beige sections become dark in dark mode */
[data-theme="dark"] .landing-boards-section,
[data-theme="dark"] .landing-cta-section,
[data-theme="dark"] .pricing-cards-section,
[data-theme="dark"] .pricing-cta-section,
[data-theme="dark"] .donate-mission,
[data-theme="dark"] .donate-tiers,
[data-theme="dark"] .donate-wall,
[data-theme="dark"] .astro-pricing {
  background: var(--bg);
}
/* Note: .astro-stats removed from grouped selector 2026-05-09 — its
   light-mode bg is var(--navy-deep) which already equals var(--bg) in
   dark mode, so the override was a no-op. */

/* Card surfaces — cream cards become dark card surfaces */
[data-theme="dark"] .board-card-v2,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .donate-tier-card,
[data-theme="dark"] .donate-mission-card,
[data-theme="dark"] .donor-list li,
[data-theme="dark"] .astro-pricing-col {
  background: var(--bg-post);
  border-color: var(--border);
}

/* Navy headings inside beige sections — switch to semantic text in dark mode */
[data-theme="dark"] .landing-boards-section .section-heading h2,
[data-theme="dark"] .landing-cta-section h2,
[data-theme="dark"] .pricing-cards-section .section-heading h2,
[data-theme="dark"] .pricing-cta-section h2,
[data-theme="dark"] .donate-mission h2,
[data-theme="dark"] .donate-tiers h2,
[data-theme="dark"] .donate-wall h2,
[data-theme="dark"] .astro-pricing h2 {
  color: var(--text);
}
/* Note: .astro-stats .section-heading h2 removed 2026-05-09 — the
   trust strip uses a sr-only h2 now, not a visible section-heading. */

/* Card headings — navy text on dark card surfaces */
[data-theme="dark"] .board-card-v2-name,
[data-theme="dark"] .pricing-price,
[data-theme="dark"] .donate-tier-name,
[data-theme="dark"] .donate-mission-card,
[data-theme="dark"] .astro-pricing-col-name {
  color: var(--text);
}

/* Landing v2 — Pricing Teaser: non-featured cards need a visible surface in dark mode.
   The rgba(255,255,255,0.04) base becomes near-invisible on dark navy.
   Featured card (.pricing-teaser-featured) uses var(--navy-deep) with gold border — already fine. */
[data-theme="dark"] .pricing-teaser-card:not(.pricing-teaser-featured) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--navy-border);
}

/* System-preference mirror */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .pricing-teaser-card:not(.pricing-teaser-featured) {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--navy-border);
  }
}

/* Landing v2 — Community section: wave desc text on dark navy */
[data-theme="dark"] .lc-wave-desc {
  color: var(--text-muted-dark);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .lc-wave-desc {
    color: var(--text-muted-dark);
  }
}

/* Board lock badge — boost visibility on dark card header (header bg is var(--navy), always dark) */
[data-theme="dark"] .board-lock-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-muted-dark);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .board-lock-badge {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-muted-dark);
  }
}

/* Phase 42: Dark mode font weight adjustment */
[data-theme="dark"] body {
  font-weight: 450;
}

/* Phase 42: Dark mode forum post surfaces (neutral dark, not navy) */
[data-theme="dark"] .op-post,
[data-theme="dark"] .reply-post {
  background: #1a1a22;
}

/* Landing v2 — Final CTA dark mode */
[data-theme="dark"] .landing-final-cta {
  background: var(--navy-deep);
  border-top-color: var(--navy-border);
}

[data-theme="dark"] .lfc-inner h2 {
  color: var(--text-on-dark);
}

[data-theme="dark"] .lfc-sub {
  color: var(--text-muted-dark);
}

[data-theme="dark"] .lfc-cta-primary {
  background: var(--gold);
  color: #fff;
}

[data-theme="dark"] .lfc-cta-primary:hover {
  background: var(--gold-light);
  box-shadow: 0 5px 18px rgba(200,146,58,0.35);
  opacity: 1;
}

/* Greentext: lighter shade for dark backgrounds (WCAG AA ~5.4:1 on #1a1a22) */
[data-theme="dark"] {
  --greentext: #7ab857;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --greentext: #7ab857;
  }
}
