/* RRC theme (WAG 2026-09-14): two palettes on one set of names.
   Light is the default (WAG 2026-09-15): the Course Reuse Map's paper-and-ink
   palette. Dark is the house look, kept as the choice. Every component keeps reading the
   same variables; only the values change under data-theme="dark" on
   the root element. Loaded by the app layout and every static page. */
:root {
  color-scheme: light;
  --steel-dark: #FAF8F2;   /* the page: paper */
  --steel-mid: #FFFFFF;    /* cards */
  --steel: #D9D2C0;        /* rules and borders */
  --parchment: #1C1E24;    /* headings, primary text: ink */
  --bone: #2E313A;         /* body text */
  --gold: #9C7A1F;         /* gold as text and borders, readable on paper */
  --gold-light: #8B6914;   /* links */
  --gold-dark: #C9A84C;    /* the lighter gold, for fills */
  --crimson: #8B1A1A;
  --crimson-light: #A8322A;
  --crimson-dark: #5C0F0F;
  --ash: #6E7178;
  --shadow: rgba(30, 24, 10, 0.18);
  --ink: #1C1E24;
  --ok: #2F6B3A;
  --err: #A8322A;
  --overlay: rgba(255, 255, 255, 0.96);
  --header-bg: rgba(250, 248, 242, 0.96);
  --header-line: rgba(139, 105, 20, 0.35);
  --scrim-rgb: 250, 248, 242;
  --tint: rgba(28, 30, 36, 0.04);
  --prose: #3A3D44;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --steel-dark: #151820;
  --steel-mid: #1E2228;
  --steel: #2A2E35;
  --parchment: #F5F0E4;
  --bone: #E8E2D4;
  --gold: #C9A84C;
  --gold-light: #E8C96A;
  --gold-dark: #8B6914;
  --crimson: #8B1A1A;
  --crimson-light: #C0392B;
  --crimson-dark: #5C0F0F;
  --ash: #8A8D94;
  --shadow: rgba(0, 0, 0, 0.7);
  --ink: #0F1218;
  /* Derived roles, so components stop hard-coding these. */
  --ok: #7FC98A;
  --err: #E07070;
  --overlay: rgba(10, 12, 16, 0.92);
  --header-bg: rgba(10, 12, 16, 0.96);
  --header-line: rgba(201, 168, 76, 0.22);
  --scrim-rgb: 21, 24, 32;
  --tint: rgba(255, 255, 255, 0.04);
  --prose: #A09888;        /* the static pages' warm reading grey */
}

/* Gold fills need dark lettering on paper; on the dark theme the
   gradient already carries the page color as its text. */
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .nav-cta {
  background: linear-gradient(135deg, #D4B45C, #B8953D);
  color: #1C1E24;
}
:root:not([data-theme="dark"]) .btn-primary:hover { color: #0F1116; }

/* The toggle, in the header nav on every page. */
.site-header-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gold-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.site-header-theme:hover { border-color: var(--gold); color: var(--gold-light); }
.site-header-theme svg { width: 16px; height: 16px; display: block; }
.site-header-theme .sun { display: block; }
.site-header-theme .moon { display: none; }
:root[data-theme="dark"] .site-header-theme .sun { display: none; }
:root[data-theme="dark"] .site-header-theme .moon { display: block; }

/* Bands that stay dark in both themes (hero scenes over photographs, the
   crimson mission band, the static footer): the dark tokens are
   re-declared inside them so their text keeps reading. */
:root:not([data-theme="dark"]) :is(#hero, .page-hero, #mission, footer.site-footer, .keep-dark) {
  --steel-dark: #151820; --steel-mid: #1E2228; --steel: #2A2E35;
  --parchment: #F5F0E4; --bone: #E8E2D4;
  --gold: #C9A84C; --gold-light: #E8C96A; --gold-dark: #8B6914;
  --ash: #8A8D94; --tint: rgba(255, 255, 255, 0.04); --prose: #A09888;
}