/* ==========================================================
   Vista navy palette (trial).
   To go back to the original colors, set PALETTE = "" in
   content.py and run build.py. Nothing else changes.
   ========================================================== */

:root[data-theme="dark"],
:root:not([data-theme]) {
  --bg: #0B1328;            /* deep navy page */
  --ink: #EDF1FA;           /* near-white headings and copy */
  --muted: #9EAAC6;         /* blue-grey secondary text */
  --line: #212F57;          /* hairlines */
  --tile-bg: #111B39;       /* cards and image placeholders */
  --card-line: #2C3D6C;     /* card outlines */
  --accent: #8EAEFF;        /* cornflower: eyebrows, highlights */
  --head-bg: rgba(11, 19, 40, .92);
  --head-hi: rgba(142, 174, 255, .08);
  --head-shadow: rgba(0, 0, 0, .6);
  --next-ink-2: #C6D0E8;
  --next-bg: linear-gradient(180deg, #172552 0%, #142047 50%, #0F1A3B 100%);
  --glow: rgba(90, 130, 240, .12);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #E5EBF9;            /* pale periwinkle-blue page */
  --ink: #111A38;
  --muted: #505E86;
  --line: #CAD4EE;
  --tile-bg: #D9E1F6;
  --card-line: #BDC9EA;
  --accent: #4060D2;
  --head-bg: rgba(229, 235, 249, .92);
  --head-hi: rgba(255, 255, 255, .6);
  --head-shadow: rgba(17, 26, 56, .18);
  --next-ink-2: #384468;
  --next-bg: linear-gradient(180deg, #DAE3FA 0%, #CFDAF5 55%, #C3D0F0 100%);
  --glow: rgba(70, 110, 230, .10);
  color-scheme: light;
}

/* accents the original palette doesn't have */
.eyebrow, .work-story h2, .cs-text .work-story h2,
.stage .lede, .story h2 { color: var(--accent); }
.stat { border-color: var(--card-line); background: var(--tile-bg); }
.rail-btn, .theme-toggle { background: var(--tile-bg); }

/* hover and current-page states use the accent */
.links a:hover, .links a[aria-current="page"],
.views button[aria-pressed="true"],
.close:hover, .foot a:hover, .lede a:hover, .more-xp summary:hover,
.pager a:hover strong, a.ext:hover, .menu-btn:hover { color: var(--accent); }
.theme-toggle:hover, .rail-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
@media (hover: hover) { .g-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg); border-color: var(--accent); } }