/* Midnight on the public site (landing and onboarding).
   ---------------------------------------------------------------------------
   The public pages have their own dark palette in landing-refresh.css. Like
   the app's midnight.css, Midnight here keeps data-theme="dark" - so every one
   of those rules still applies - and data-dark-tone="midnight", written onto
   <html> by the server (src/themeDefaults.js), swaps only the neutral blacks
   for the app's navy. The selectors repeat landing-refresh.css's with the
   tone added, so they win without !important; text, greens and the hero
   imagery are left exactly as Dark has them. */

:root[data-theme="dark"][data-dark-tone="midnight"] .landing-body,
:root[data-theme="dark"][data-dark-tone="midnight"] .onboarding-body {
  --surface: #111a2b;
  --theruka-paper: #0a0f1c;
  --theruka-line: rgba(148, 170, 220, 0.16);
  --line: rgba(148, 170, 220, 0.16);
  --pill: rgba(148, 170, 220, 0.12);
  --pill-hover: rgba(148, 170, 220, 0.18);
  --bg: #0a0f1c;
  --panel: #111a2b;
  --panel-strong: #111a2b;
  background: #0a0f1c;
}

:root[data-theme="dark"][data-dark-tone="midnight"] .landing-hero-frame::after {
  background: linear-gradient(90deg, rgba(10, 15, 28, 0.75), rgba(10, 15, 28, 0.1) 70%);
}

:root[data-theme="dark"][data-dark-tone="midnight"] .landing-hero-steps li { background: rgba(17, 26, 43, 0.86); }
:root[data-theme="dark"][data-dark-tone="midnight"] .landing-resource-band { background: #111a2b; }

:root[data-theme="dark"][data-dark-tone="midnight"] .onboarding-shell::before {
  background: linear-gradient(90deg, rgba(10, 15, 28, 0.92) 0%, rgba(10, 15, 28, 0.8) 38%, rgba(10, 15, 28, 0.35) 72%, rgba(10, 15, 28, 0.25) 100%);
}

:root[data-theme="dark"][data-dark-tone="midnight"] ::selection {
  background: rgba(110, 140, 215, 0.42);
  color: #ffffff;
}