/* AV Atlas's own look, layered on top of the portal's shared theme.css
   (loaded first) rather than editing it -- theme.css is shared by every app
   in family-portal, so this file only touches variables and rules that are
   scoped to av-atlas's own pages, never the shared file itself.

   Redefining the same custom properties theme.css sets on :root is enough
   to re-theme every var(--...) usage across every av-atlas page and
   nav.js/filters.js's injected styles, with no per-page changes needed.

   Accent pair is indigo + amber (chosen over an earlier near-black/neon
   "sensor glow" direction, which read more dated-sci-fi than modern once
   mocked up against real page content). */
:root {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel2: #f1f3f8;
  --border: #e4e7ef;
  --text: #14181f;
  --muted: #6b7280;
  --accent: #4f46e5;
  --accent2: #f59e0b;
}

body {
  /* theme.css's body rule paints a dark radial "space" gradient behind
     every app -- flat and light here instead, the opposite direction. */
  background: var(--bg);
}

/* Every av-atlas page defines its own .panel/.stat-tile/.filter-bar
   rules locally (border + flat background) rather than importing shared
   component CSS, so re-styling them centrally means targeting the same
   class names here rather than editing N pages individually. Softer
   shadow-based depth instead of a hard border reads as considerably
   lighter/more modern than a dark panel outlined in a 1px border. */
.panel, .stat-tile, .filter-bar, .topbar, .year-row, #citation-source-picker {
  border-color: var(--border) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
}

h1, h2 { letter-spacing: -0.01em; }

/* tr:hover on every page's table uses var(--panel2), which already reads
   as a soft light-grey highlight now -- no override needed there. */