/* Delhi Pulse / Ring & River — Midnight identity.
 * Load after unified-atlas.css. Change body[data-theme], never invert the scene.
 * The --scene-* tokens are shared by the Three renderer and these controls.
 */
body[data-atlas="unified"] {
  --scene-background: #F7F8FA;
  --scene-ground: #DBDFE7;
  --scene-context: #A7AFBF;
  --scene-pedestal: #242833;
  --scene-rim: #C6B6F3;
  --scene-water: #689EAE;
  --scene-island-side: #878C9B;
  --scene-glass-highlight: #FFFFFF;
  --scene-glass-attenuation: #D9E4F2;
  --scene-label: #13151A;
  --scene-label-surface: #FFFFFF;
  --scene-light: #FFFFFF;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --paper: #11131A;
  --surface: #1B1E29;
  --surface-raised: #252937;
  --surface-hover: #2C3040;
  --pine: #F3F4F8;
  --ink: #F3F4F8;
  --muted: #ADB5C7;
  --line: #3B4254;
  --line-strong: #59637A;
  --lilac: #C6B6F3;
  --sand: var(--lilac);
  --lime: #DFFF7A;
  --mint: #B9E1D3;
  --terracotta: #F27D5B;
  --river: #B9E1D3;
  --on-accent: #13151A;
  --accent-muted: #42494F;
  --scene-background: #11131A;
  --scene-ground: #252A38;
  --scene-context: #66728B;
  --scene-pedestal: #242833;
  --scene-rim: #C6B6F3;
  --scene-water: #427C94;
  --scene-island-side: #666D87;
  --scene-glass-highlight: #DBD3F7;
  --scene-glass-attenuation: #C9D1E2;
  --scene-label: #F3F4F8;
  --scene-label-surface: #1B1E29;
  --scene-light: #F1ECFF;
  background: var(--paper);
  color: var(--pine);
}

body[data-theme="dark"] ::selection { background: var(--lilac); color: var(--on-accent); }
body[data-theme="dark"] :is(button, a, input, select, [tabindex]):focus-visible {
  outline-color: var(--lilac);
  outline-offset: 3px;
}
body[data-theme="dark"] :is(input, select) { accent-color: var(--lilac); }
body[data-theme="dark"] input::placeholder { color: var(--muted); opacity: 1; }
body[data-theme="dark"] :is(.brand-lockup, .postcard-wordmark, .closing .mini-mark img) {
  /* Existing ink assets are monochrome outlined vectors. Preserve their shape. */
  filter: brightness(0) invert(1);
}

/* App chrome remains quiet; colour marks the current destination or action. */
body[data-theme="dark"] .site-header,
body[data-theme="dark"][data-view="atlas"] .site-header { background: var(--paper); border-color: var(--line); }
body[data-theme="dark"] .design-label { color: var(--muted); }
body[data-theme="dark"] .live-dot { background: var(--mint); }
body[data-theme="dark"] .main-nav button { color: var(--muted); }
body[data-theme="dark"] .main-nav button.active { color: var(--on-accent); background: var(--lilac); }
body[data-theme="dark"] .main-nav button:hover:not(.active) { background: var(--surface-hover); color: var(--pine); }
body[data-theme="dark"] :is(.icon-button, .header-end > .icon-button) { color: var(--pine); background: var(--surface); border-color: var(--line); }
body[data-theme="dark"] .icon-button:hover { background: var(--surface-hover); }
body[data-theme="dark"] .button.primary { background: var(--lilac); border-color: var(--lilac); color: var(--on-accent); }
body[data-theme="dark"] .button.primary:hover { background: #D5C9F7; border-color: #D5C9F7; }
body[data-theme="dark"] .button.secondary { background: var(--surface); border-color: var(--line); color: var(--pine); }
body[data-theme="dark"] .button.secondary:hover { background: var(--surface-hover); }
body[data-theme="dark"] #save-place[style*="--lime"] { color: var(--on-accent); }
body[data-theme="dark"] .skip { background: var(--lilac); color: var(--on-accent); }

/* Readings keep the same recognisable air / weather card colours in both themes. */
body[data-theme="dark"] :is(.brief-card[data-detail="weather"], .air-card) { color: var(--on-accent); }
body[data-theme="dark"] :is(.brief-card[data-detail="weather"], .air-card) :is(.metric-top, .metric-line, .metric-foot) { color: var(--on-accent); }
body[data-theme="dark"] :is(.brief-card[data-detail="weather"], .air-card) :is(.metric-line small, .metric-foot) { color: var(--accent-muted); }
body[data-theme="dark"] .metro-card,
body[data-theme="dark"] .metro-card:hover { background: var(--surface); color: var(--pine); border-color: var(--line); }
body[data-theme="dark"] .metro-card :is(.metric-top, .metric-line) { color: var(--pine); }
body[data-theme="dark"] .metro-card :is(.metric-foot, .metric-line small) { color: var(--muted); }
body[data-theme="dark"] .place-picker { background: var(--surface); border-color: var(--line); }
body[data-theme="dark"] :is(.topic-card, .story-card, .saved-place) { color: var(--pine); background: var(--surface); border-color: var(--line); }
body[data-theme="dark"] :is(.topic-card, .story-card, .saved-place):hover { background: var(--surface-raised); }
body[data-theme="dark"] .topic-card > svg:first-child { color: var(--lilac); }
body[data-theme="dark"] .story-icon { color: var(--on-accent); background: var(--lilac); }
body[data-theme="dark"] .river-story .story-icon { background: var(--mint); }
body[data-theme="dark"] .round-arrow { color: var(--pine); background: var(--surface-hover); }
body[data-theme="dark"] :is(.closing, .saved-note, .site-footer) { border-color: var(--line); }
body[data-theme="dark"] .saved-empty { background: #29243B; }

/* Sky is always a dark, legible astronomical chart. Dark mode matches the chrome. */
body[data-theme="dark"] .sky-chart-card { color: var(--pine); background: #171B26; border: 1px solid var(--line); }
body[data-theme="dark"] .sky-chart-note { color: var(--muted); }
body[data-theme="dark"] :is(.sky-event, .sky-event:first-child) { background: var(--surface); border-color: var(--line); }
body[data-theme="dark"] .sky-event > svg { background: var(--lilac); color: var(--on-accent); }
body[data-theme="dark"] .evidence { background: #302940; border-color: #6F5F96; color: #E8DDFD; }
body[data-theme="dark"] .evidence.warning { background: #3C2725; border-color: #9B6054; color: #FFD2C4; }

/* Sheets, data provenance, place search and postcards all use the same surfaces. */
body[data-theme="dark"] dialog { color: var(--pine); background: var(--surface); border-color: var(--line); box-shadow: 0 24px 80px #00000066; }
body[data-theme="dark"] dialog::backdrop { background: #080A12A6; }
body[data-theme="dark"] :is(.source-grid > a, input[type="search"]) { background: var(--paper); border-color: var(--line); color: var(--pine); }
body[data-theme="dark"] .place-row { border-color: var(--line); }
body[data-theme="dark"] .place-row:hover { background: var(--surface-hover); }
body[data-theme="dark"] .source-note { border-color: var(--lilac); }
body[data-theme="dark"] .detail-chart { stroke: var(--mint); }
body[data-theme="dark"] .postcard { background: var(--paper); }
body[data-theme="dark"] .toast { background: var(--lilac); color: var(--on-accent); border: 1px solid #D9CFF6; }

/* Re-declare native atlas tokens: @scope sets light tokens on #atlas-root itself. */
body[data-theme="dark"] #atlas-root {
  color-scheme: dark;
  --paper: #11131A;
  --ink: #F3F4F8;
  --forest: #F3F4F8;
  --panel: #1B1E29;
  --bg: #11131A;
  --glass: #1B1E29;
  --glass-strong: #1B1E29;
  --text: #F3F4F8;
  --secondary: #ADB5C7;
  --muted: #ADB5C7;
  --dim: #ADB5C7;
  --line: #3B4254;
  --line-strong: #59637A;
  --ok: #B9E1D3;
  --warn: #DFFF7A;
  --bad: #FF9C82;
  background: transparent;
  color: var(--text);
}
body[data-theme="dark"] #atlas-root :is(.eyebrow, .atlas-intro, .globe-caption, .globe-attribution, .hint) { color: var(--muted); }
body[data-theme="dark"] #atlas-root .atlas-controls .chip { background: var(--panel); border-color: var(--line); color: var(--text); }
body[data-theme="dark"] #atlas-root .atlas-controls .chip:hover { background: #2C3040; border-color: var(--line-strong); }
body[data-theme="dark"] #atlas-root .atlas-controls .chip.on,
body[data-theme="dark"] #atlas-root #atlas-layers { background: #C6B6F3; border-color: #C6B6F3; color: #13151A; }
body[data-theme="dark"] #atlas-root :is(.dock, .drawer, .glass, .mini, .me-card, .modal-card, .sv-panel) { background: var(--panel); border-color: var(--line); color: var(--text); }
body[data-theme="dark"] #atlas-root .dock { box-shadow: 0 8px 28px #00000024; }
body[data-theme="dark"] #atlas-root .drawer { box-shadow: 0 18px 70px #00000066; }
body[data-theme="dark"] #atlas-root :is(.dock-head, .drawer-head) { border-color: var(--line); }
body[data-theme="dark"] #atlas-root .mini:hover { background: #2C3040; border-color: var(--line-strong); }
body[data-theme="dark"] #atlas-root .card { background: #252937; border-color: transparent; }
body[data-theme="dark"] #atlas-root .card:hover { background: #2C3040; }
body[data-theme="dark"] #atlas-root .card.off { background: #171A24; border-color: transparent; }
body[data-theme="dark"] #atlas-root :is(.card.on, .card.active) { background: #302940; border-color: #6F5F96; }
body[data-theme="dark"] #atlas-root :is(.card-big, .card-name) { color: var(--text); }
body[data-theme="dark"] #atlas-root .card.off :is(.card-name, .card-big) { color: var(--muted); }
body[data-theme="dark"] #atlas-root .ico { background: color-mix(in srgb, var(--c) 18%, #1B1E29); border-color: color-mix(in srgb, var(--c) 50%, #3B4254); color: var(--c); }
body[data-theme="dark"] #atlas-root .card.active .ico { background: #C6B6F3; border-color: #C6B6F3; color: #13151A; }
body[data-theme="dark"] #atlas-root .switch { background: #11131A; border-color: var(--line-strong); }
body[data-theme="dark"] #atlas-root .switch::after { background: #ADB5C7; }
body[data-theme="dark"] #atlas-root .switch.on { background: #C6B6F3; border-color: #C6B6F3; }
body[data-theme="dark"] #atlas-root .switch.on::after { background: #13151A; }
body[data-theme="dark"] #atlas-root :is(.stat, .row, .note) { background: #252937; border-color: var(--line); }
body[data-theme="dark"] #atlas-root .row:hover { background: #2C3040; }
body[data-theme="dark"] #atlas-root :is(.pill, .badge) { background: #302940; border-color: #6F5F96; color: var(--text); }
/* Data badges preserve source colours. Light fields need a dark foreground. */
body[data-theme="dark"] #atlas-root .badge[style*="background:"] { color: #13151A; }
body[data-theme="dark"] #atlas-root .badge[style*="background:#64748b"] { color: #FFFFFF; }
body[data-theme="dark"] #atlas-root .badge[style*="background:#7c6cc8"] { color: #FFFFFF; background-image: linear-gradient(#00000018, #00000018); }
body[data-theme="dark"] #atlas-root :is(.note, .modal) code { background: #303548; color: var(--text); }
body[data-theme="dark"] #atlas-root :is(.note, .modal, .legend) a { color: #D5C9F7; }
body[data-theme="dark"] #atlas-root .bar { background: #11131A; }
body[data-theme="dark"] #atlas-root :is(.modal, .skyview) { background: #080A12B3; }
body[data-theme="dark"] #atlas-root :is(.sv-tip, .deck-tooltip) { background: #1B1E29 !important; border-color: #59637A !important; color: #F3F4F8 !important; }
body[data-theme="dark"] #atlas-root .drawer .mini[style*="color:#fff"] { background: #C6B6F3 !important; border-color: #C6B6F3 !important; color: #13151A !important; }
body[data-theme="dark"] #atlas-root .ticker { background: #1B1E29; border-color: var(--line); }
body[data-theme="dark"] #atlas-root .ticker-label { background: #DFFF7A; color: #13151A; }
body[data-theme="dark"] #atlas-root .ticker-label i { background: #13151A; }
body[data-theme="dark"] #atlas-root .ticker-inner span { color: var(--muted); }
body[data-theme="dark"] #atlas-root .ticker-inner i { color: var(--text) !important; }
body[data-theme="dark"] #atlas-root .hint { background: transparent; }

/* Canvas is shaded by Three. CSS never recolours or inverts the live map texture. */
body[data-theme="dark"][data-renderer="three"] #atlas-root .globe-stage { background: radial-gradient(ellipse at 50% 70%, #29223880, transparent 70%); }
body[data-theme="dark"] #globe-loading { color: #ADB5C7; }
body[data-theme="dark"] #globe-tooltip { color: #F3F4F8; background: #1B1E29F5; border-color: #59637A; box-shadow: 0 8px 32px #0000004D; }
body[data-theme="dark"] :is(.scene-tools, .dome-controls, .globe-tools) { color: var(--pine); }
body[data-theme="dark"] :is(.scene-tools, .dome-controls, .globe-tools) button { background: var(--surface); border-color: var(--line); color: var(--pine); }
body[data-theme="dark"] :is(.scene-tools, .dome-controls, .globe-tools) button:hover { background: var(--surface-hover); }
body[data-theme="dark"] #atlas-root .maplibregl-ctrl-group { background: #1B1E29 !important; border-color: #3B4254; }
body[data-theme="dark"] #atlas-root .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(.95); }
body[data-theme="dark"] #atlas-root .maplibregl-ctrl-attrib { background: #1B1E29 !important; color: #ADB5C7 !important; border-color: #3B4254; }
body[data-theme="dark"] #atlas-root .maplibregl-ctrl-attrib a { color: #F3F4F8 !important; }

@media (max-width: 760px) {
  body[data-theme="dark"] .main-nav { background: #1B1E29; border-color: #3B4254; }
  body[data-renderer="three"][data-theme="dark"][data-view="atlas"] .main-nav { background: #1B1E29; border-color: #3B4254; }
  body[data-theme="dark"][data-view="atlas"] .site-header { border-color: #3B4254; }
  body[data-theme="dark"] #atlas-root .dock { box-shadow: 0 -10px 40px #00000040; }
  body[data-theme="dark"] dialog { box-shadow: 0 -12px 60px #00000066; }
}