/* ──────────────────────────────────────────────────────────────────────────
   ADS dark theme — shared override layer.

   The content pages (resources, sdc, playground, overview) were built with
   Tailwind's light palette. Rather than rewrite ~1,200 utility classes across
   four large files, this sheet remaps that palette onto the same dark surface
   the landing page uses.

   Load it LAST in <head>, after the page's own <style> block and the Tailwind
   CDN script. The !important flags are what let a static sheet win against
   Tailwind's runtime-injected utilities — they are deliberate, and confined
   to this file. Remove the <link> from a page to return it to light mode.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --ads-surface:      rgba(255, 255, 255, 0.05);
  --ads-surface-2:    rgba(255, 255, 255, 0.08);
  --ads-surface-3:    rgba(255, 255, 255, 0.11);
  --ads-border:       rgba(255, 255, 255, 0.14);
  --ads-border-soft:  rgba(255, 255, 255, 0.09);
  --ads-text:         #e2e8f0;
  --ads-text-strong:  #f8fafc;
  --ads-text-dim:     #cbd5e1;
  --ads-text-dimmer:  #94a3b8;
  --ads-accent:       #a5b4fc;
  --ads-accent-hi:    #c7d2fe;
}

/* Page canvas. `body.bg-white` outranks the bare `.bg-white` utility below. */
body,
body.bg-white {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%) fixed !important;
  color: var(--ads-text) !important;
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.bg-white                        { background-color: var(--ads-surface) !important; }
.bg-slate-50,
.bg-slate-100                    { background-color: var(--ads-surface-2) !important; }
.bg-slate-50\/50                 { background-color: var(--ads-surface) !important; }
/* Neutral chips (`bg-slate-200 text-slate-700`) invert with their text. */
.bg-slate-200                    { background-color: var(--ads-surface-3) !important; }
/* playground.html percentile bar — a fill, so keep it solid and visible. */
.bg-slate-300                    { background-color: rgba(148, 163, 184, 0.55) !important; }
.bg-indigo-50                    { background-color: rgba(99, 102, 241, 0.14) !important; }
.bg-amber-50                     { background-color: rgba(245, 158, 11, 0.14) !important; }
.bg-green-50,
.bg-emerald-50                   { background-color: rgba(16, 185, 129, 0.14) !important; }

/* Sticky page headers: opaque enough to hide content scrolling beneath. */
.bg-white\/90,
.bg-white\/95                    { background-color: rgba(15, 23, 42, 0.88) !important; }

/* ── Text ───────────────────────────────────────────────────────────────── */
.text-slate-900,
.text-slate-800                  { color: var(--ads-text-strong) !important; }
.text-slate-700,
.text-slate-600                  { color: var(--ads-text) !important; }
.text-slate-500                  { color: var(--ads-text-dim) !important; }
.text-slate-400                  { color: var(--ads-text-dimmer) !important; }
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-800                 { color: var(--ads-accent) !important; }
.text-indigo-900                 { color: var(--ads-accent-hi) !important; }
.text-emerald-700,
.text-emerald-800,
.text-green-700,
.text-green-800                  { color: #6ee7b7 !important; }
.text-amber-600,
.text-amber-700,
.text-amber-800                  { color: #fcd34d !important; }
.text-blue-700                   { color: #93c5fd !important; }
.text-violet-700                 { color: #c4b5fd !important; }

/* ── Borders ────────────────────────────────────────────────────────────── */
.border-slate-100                { border-color: var(--ads-border-soft) !important; }
.border-slate-200,
.border-slate-300                { border-color: var(--ads-border) !important; }
.border-indigo-100,
.border-indigo-200               { border-color: rgba(129, 140, 248, 0.35) !important; }
.border-amber-200                { border-color: rgba(245, 158, 11, 0.35) !important; }
.border-green-200,
.border-emerald-200              { border-color: rgba(16, 185, 129, 0.35) !important; }
.divide-slate-100 > * + *,
.divide-slate-200 > * + *        { border-color: var(--ads-border-soft) !important; }

/* ── Hover states written for a light page ──────────────────────────────── */
.hover\:text-slate-900:hover,
.hover\:text-slate-700:hover,
.hover\:text-slate-600:hover     { color: #ffffff !important; }
.hover\:text-indigo-600:hover,
.hover\:text-indigo-800:hover,
.hover\:text-indigo-900:hover    { color: var(--ads-accent-hi) !important; }
.hover\:text-emerald-800:hover   { color: #a7f3d0 !important; }
.hover\:bg-slate-50:hover,
.hover\:bg-slate-100:hover       { background-color: var(--ads-surface-3) !important; }
.hover\:bg-indigo-50:hover       { background-color: rgba(99, 102, 241, 0.22) !important; }
.hover\:border-slate-400:hover   { border-color: rgba(255, 255, 255, 0.30) !important; }
.hover\:border-indigo-200:hover,
.hover\:border-indigo-300:hover  { border-color: rgba(129, 140, 248, 0.55) !important; }

/* ── Form controls ──────────────────────────────────────────────────────── */
input, select, textarea {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--ads-text) !important;
  border-color: var(--ads-border) !important;
}
input::placeholder, textarea::placeholder { color: #64748b !important; }
select option { background-color: #1e1b4b; color: var(--ads-text); }

/* ── Page-specific light remnants ───────────────────────────────────────── */
::-webkit-scrollbar-track        { background: #0f172a; }
::-webkit-scrollbar-thumb        { background: #475569; }
::-webkit-scrollbar-thumb:hover  { background: #64748b; }

/* playground.html template picker */
.template-card.active            { background: rgba(99, 102, 241, 0.20) !important; }

/* The page canvas is already the hero gradient. Let it show through rather
   than repainting it, which leaves a visible seam where the section ends. */
.gradient-hero {
  background: transparent !important;
  border-bottom: 1px solid var(--ads-border-soft);
}
