/* Theme layer.
 *
 * style.css owns the LIGHT palette on :root (--charcoal, --text, --muted,
 * --paper, --ivory, --white, --line, --gold, --surface-dark, --on-accent,
 * --header-bg) and every component rule consumes those tokens. This file only
 * redefines the same tokens for dark mode, so there is exactly one token
 * system and dark mode reaches every component automatically.
 *
 * Loaded AFTER style.css: [data-theme="dark"] and :root have equal
 * specificity, so source order decides and the overrides below win.
 *
 * Two token pairs deliberately do NOT flip:
 *   --surface-dark  dark bands (footer, CTA blocks) are dark in both themes
 *   --on-accent     ink printed on the gold accent stays dark in both themes
 */

:root {
  /* Tells the UA to style native widgets (form controls, scrollbars, the
   * caret) for whichever theme is active. `light dark` follows the OS in the
   * default "system" state; the explicit [data-theme] blocks below pin it when
   * the user has chosen a theme via the toggle. */
  color-scheme: light dark;

  /* Generic aliases kept for anything that still speaks the old vocabulary. */
  --bg: var(--paper);
  --fg: var(--text);
  --accent: var(--gold);
  --card-bg: var(--white);
  --border: var(--line);
}

[data-theme="dark"] {
  color-scheme: dark;
  --charcoal: #f3f1ee;
  --charcoal2: #e2dfd9;
  --text: #e9e6e1;
  --muted: #a7a099;
  --paper: #141416;
  --ivory: #1b1b1f;
  --white: #202025;
  --line: #33333a;
  --gold: #f0b183;
  --surface-dark: #0e0e10;
  --header-bg: rgba(20, 20, 22, 0.92);
}

[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --charcoal: #f3f1ee;
    --charcoal2: #e2dfd9;
    --text: #e9e6e1;
    --muted: #a7a099;
    --paper: #141416;
    --ivory: #1b1b1f;
    --white: #202025;
    --line: #33333a;
    --gold: #f0b183;
    --surface-dark: #0e0e10;
    --header-bg: rgba(20, 20, 22, 0.92);
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  transition: background 0.2s ease, color 0.2s ease;
}

/* The wordmark is a black PNG; invert it on dark backgrounds. The footer is a
   dark band in both themes, so its logo is inverted unconditionally in
   style.css — this only covers the header. */
[data-theme="dark"] .logo img {
  filter: brightness(0) invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo img {
    filter: brightness(0) invert(1);
  }
}

/* Photo grading.
 *
 * Every photograph on the site is a studio shot on a near-white seamless
 * background with no alpha channel, so on the dark ground they read brighter
 * than intended. --photo-filter grades them down a little.
 *
 * The homepage hero is the exception: its cream field and white oval frame
 * used to be baked into the bitmap, which no filter can fix. That asset is
 * now a real cut-out (hero-treble-transparent.webp, alpha outside the oval),
 * so the page background shows through in both themes.
 *
 * One token, one rule: the previous version duplicated the filter across
 * three blocks AND missed the homepage hero, whose style.css filter is
 * `!important` and could not be overridden from here. Hence the `!important`
 * below — it is required to win, not decoration. */
:root {
  --photo-filter: saturate(0.92) contrast(0.98);
}
[data-theme="dark"] {
  --photo-filter: saturate(0.85) contrast(1.02) brightness(0.82);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --photo-filter: saturate(0.85) contrast(1.02) brightness(0.82);
  }
}

.program-photo-card > img,
.course-hero-image img,
.about-page-img,
.pic,
.image-oval img,
.hero .hero-approved-art {
  filter: var(--photo-filter) !important;
}