/* ============================================================
   Voices du Peuple — Dark mode (night sky)
   Activated via html[data-theme="dark"]
   ============================================================ */

html[data-theme="dark"] body {
  background: #0d1b2e;
  color: rgba(236, 243, 250, 0.95);
}

/* ---- night sky ---- */
html[data-theme="dark"] .sky {
  background:
    radial-gradient(120% 90% at 50% -25%, rgba(120, 160, 220, 0.16) 0%, rgba(120,160,220,0) 55%),
    linear-gradient(180deg, #060e1d 0%, #0c1c34 48%, #1b335a 86%, #24405f 100%);
}
/* faint stars — dense in the open sky (freedom), generated seamless tile */
html[data-theme="dark"] .sky::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("assets/stars-tile.png"), url("assets/stars-tile.png");
  background-size: 540px 540px, 760px 760px;
  background-position: 0 0, 270px 140px;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 95%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 95%);
  pointer-events: none;
  z-index: 0;
}
/* moonlit clouds — dimmer, cooler */
html[data-theme="dark"] .belt { opacity: 0.22; filter: brightness(0.8); }
html[data-theme="dark"] .belt-mid { opacity: 0.34; }
html[data-theme="dark"] .horizon-haze {
  background: linear-gradient(180deg, rgba(16, 28, 48, 0) 0%, rgba(16, 28, 48, 0.85) 100%);
}
html[data-theme="dark"] .hero-head-mark { opacity: 0.07; }
html[data-theme="dark"] .scroll-hint { opacity: 0.5; }

/* ---- nav: liquid glass at night ---- */
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav.nav--on-light {
  background: linear-gradient(135deg, rgba(140, 180, 235, 0.14) 0%, rgba(60, 100, 160, 0.06) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  backdrop-filter: blur(26px) saturate(1.4);
  border-color: rgba(190, 215, 245, 0.30);
  box-shadow:
    0 12px 40px rgba(2, 8, 18, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.06);
  color: rgba(240, 246, 252, 0.97);
}
html[data-theme="dark"] .nav .nav-brand img { filter: none; opacity: 1; }
html[data-theme="dark"] .nav .nav-links a:hover { background: rgba(160, 195, 235, 0.12); }
html[data-theme="dark"] .nav .nav-links a.current { background: rgba(160, 195, 235, 0.16); }
html[data-theme="dark"] .nav .lang-toggle {
  background: rgba(160, 195, 235, 0.08);
  border-color: rgba(160, 195, 235, 0.22);
}
html[data-theme="dark"] .nav .lang-toggle button { color: rgba(236,243,250,0.7); }
html[data-theme="dark"] .nav .lang-toggle button.active {
  background: rgba(236, 243, 250, 0.92);
  color: #0d1b2e;
}
html[data-theme="dark"] .nav .nav-search {
  background: rgba(160, 195, 235, 0.08);
  border-color: rgba(160, 195, 235, 0.22);
}
html[data-theme="dark"] .nav .nav-search:hover { background: rgba(160, 195, 235, 0.18); }
html[data-theme="dark"] .nav .nav-burger {
  background: rgba(160, 195, 235, 0.08);
  border-color: rgba(160, 195, 235, 0.22);
}
html[data-theme="dark"] .nav .nav-burger:hover { background: rgba(160, 195, 235, 0.18); }
html[data-theme="dark"] .nav-menu {
  background: linear-gradient(150deg, rgba(40, 64, 100, 0.55), rgba(16, 30, 52, 0.40));
  border-color: rgba(190, 215, 245, 0.28);
  box-shadow: 0 18px 44px rgba(2, 8, 18, 0.5), inset 0 1px 0 rgba(255,255,255,0.16);
}
html[data-theme="dark"] .nav-menu a:hover, html[data-theme="dark"] .nav-menu a:active { background: rgba(160, 195, 235, 0.14); }

/* ---- manifesto: dark slate ---- */
html[data-theme="dark"] .manifesto {
  background: linear-gradient(180deg, #101c30 0%, #0e1a2c 50%, #0c1828 100%);
  color: rgba(225, 236, 247, 0.92);
}
html[data-theme="dark"] .manifesto .section-kicker { opacity: 0.45; }
html[data-theme="dark"] .m-card {
  background: linear-gradient(150deg, rgba(150, 190, 235, 0.10), rgba(150, 190, 235, 0.03));
  border-color: rgba(160, 195, 235, 0.18);
  box-shadow: 0 10px 36px rgba(2, 8, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="dark"] .m-card:hover {
  box-shadow: 0 18px 48px rgba(2, 8, 18, 0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ---- our work: blend from slate into ink (already dark) ---- */
html[data-theme="dark"] .work {
  background: linear-gradient(180deg, #0c1828 0%, #0b1626 30%, var(--ink) 60%, var(--ink) 100%);
}
/* the dark moment: a few lonely stars — dimmer than the open sky, but still visible */
html[data-theme="dark"] .work::before { opacity: 0.75; }
/* sparse drifting starlight high up in the manifesto dusk */
html[data-theme="dark"] .manifesto::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-image: url("assets/stars-tile.png");
  background-size: 900px 900px;
  opacity: 0.30;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
html[data-theme="dark"] .manifesto { position: relative; }

/* ---- join section / page ---- */
html[data-theme="dark"] .join {
  background: linear-gradient(180deg, var(--ink) 0%, #0e1f38 40%, #1b335a 80%, #24405f 100%);
}
html[data-theme="dark"] .join-page {
  background:
    radial-gradient(120% 90% at 50% -25%, rgba(120, 160, 220, 0.14) 0%, rgba(120,160,220,0) 55%),
    linear-gradient(180deg, #060e1d 0%, #0c1c34 52%, #1b335a 100%);
}
/* starfield on the standalone Join page (it isn't a .sky element) */
html[data-theme="dark"] .join-page::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("assets/stars-tile.png"), url("assets/stars-tile.png");
  background-size: 540px 540px, 760px 760px;
  background-position: 0 0, 270px 140px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}
html[data-theme="dark"] .join-page .clouds { opacity: 0.4; }
html[data-theme="dark"] .join-page .join-card { position: relative; z-index: 2; }

/* ---- materials pages ---- */
html[data-theme="dark"] .materials-list {
  background: linear-gradient(180deg, #101c30 0%, #0e1a2c 60%, #0c1828 100%);
  color: rgba(225, 236, 247, 0.92);
}
html[data-theme="dark"] .mat-card {
  background: linear-gradient(150deg, rgba(150, 190, 235, 0.10), rgba(150, 190, 235, 0.03));
  border-color: rgba(160, 195, 235, 0.18);
  box-shadow: 0 10px 36px rgba(2, 8, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="dark"] .mat-card:hover {
  box-shadow: 0 18px 48px rgba(2, 8, 18, 0.55), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="dark"] .btn-glass-deep {
  color: rgba(236, 243, 250, 0.95);
  background: linear-gradient(135deg, rgba(150, 190, 235, 0.16), rgba(150, 190, 235, 0.05));
  border-color: rgba(160, 195, 235, 0.30);
  box-shadow: 0 8px 24px rgba(2, 8, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-theme="dark"] .btn-glass-deep:hover {
  background: linear-gradient(135deg, rgba(150, 190, 235, 0.26), rgba(150, 190, 235, 0.10));
}
html[data-theme="dark"] .btn-deep { background: rgba(236,243,250,0.92); color: #0d1b2e; }

/* ---- footer ---- */
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #0c1828, #0a1422);
  color: rgba(225, 236, 247, 0.85);
}

/* ---- assessment page: graphite night ---- */
html[data-theme="dark"] body.assess-body {
  background:
    radial-gradient(130% 80% at 50% -20%, rgba(120, 130, 150, 0.14) 0%, rgba(120,130,150,0) 55%),
    linear-gradient(180deg, #191c21 0%, #131619 45%, #0e1013 100%);
  color: rgba(231, 234, 238, 0.94);
}
html[data-theme="dark"] .as-ambient i { opacity: 0.16; }
html[data-theme="dark"] .as-ambient i:nth-child(1) { opacity: 0.10; }
html[data-theme="dark"] .as-hero h1 { color: #eef0f3; }
html[data-theme="dark"] .g-pane {
  background: linear-gradient(150deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.025) 100%);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.14);
}
html[data-theme="dark"] .ind-pane .ind-title,
html[data-theme="dark"] .as-card h3 { color: #eef0f3; }
html[data-theme="dark"] .ind-row {
  background: linear-gradient(150deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="dark"] .ind-name { color: rgba(231,234,238,0.92); }
html[data-theme="dark"] .ind-name a { border-bottom-color: rgba(231,234,238,0.3); }
html[data-theme="dark"] .dot {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
/* re-declare lit/ghost colors under dark scope (must follow the dim override) */
html[data-theme="dark"] .dot.on-red    { background: #e0452f; border-color: #c33a26; box-shadow: 0 0 10px rgba(224,69,47,0.55), inset 0 1px 0 rgba(255,255,255,0.4); }
html[data-theme="dark"] .dot.on-amber  { background: #e8a13c; border-color: #cd8a2c; box-shadow: 0 0 10px rgba(232,161,60,0.55), inset 0 1px 0 rgba(255,255,255,0.4); }
html[data-theme="dark"] .dot.on-green  { background: #3fae6a; border-color: #339157; box-shadow: 0 0 10px rgba(63,174,106,0.55), inset 0 1px 0 rgba(255,255,255,0.4); }
html[data-theme="dark"] .dot.ghost-up   { background: rgba(63,174,106,0.30); border-color: rgba(63,174,106,0.45); }
html[data-theme="dark"] .dot.ghost-down { box-shadow: 0 0 6px rgba(224,69,47,0.3), inset 0 1px 2px rgba(0,0,0,0.3); opacity: 0.55; }
html[data-theme="dark"] .vote button {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: rgba(231,234,238,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .vote button:hover { background: rgba(255,255,255,0.18); color: #fff; }
html[data-theme="dark"] .erosion {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
html[data-theme="dark"] .erosion .track { background: rgba(255,255,255,0.12); }
html[data-theme="dark"] .as-card p { color: rgba(231, 234, 238, 0.75); }
html[data-theme="dark"] .as-card p strong { color: #eef0f3; }
html[data-theme="dark"] body.assess-body .nav,
html[data-theme="dark"] body.assess-body .nav.nav--on-light {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  border-color: rgba(255,255,255,0.16);
  color: rgba(231,234,238,0.94);
}
html[data-theme="dark"] body.assess-body .nav-brand img { filter: none; opacity: 1; }
html[data-theme="dark"] body.assess-body .lang-toggle button { color: rgba(231,234,238,0.65); }
html[data-theme="dark"] body.assess-body .lang-toggle button.active { background: rgba(236,243,250,0.92); color: #15181d; }

/* ---- theme toggle icon ---- */
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }