/* PSC pages in dark green (the default) or light: psc-theme-v1.js sets html[data-theme] and the switch.
   v2 (Claude, 14 Nov 2026): header photos in PSC green, one grade for each look. */
.psc-theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  padding: 0;
  border: 1px solid var(--line, var(--border, #d5dfdb));
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.psc-theme-toggle:hover { background: rgba(127, 160, 150, .14); }
.psc-theme-toggle:focus-visible { outline: 3px solid #287b85; outline-offset: 3px; }
.psc-theme-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .psc-theme-moon,
html:not([data-theme="dark"]) .psc-theme-sun { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101c1e;
  --ink: #edf4ed;
  --muted: #b7c9c4;
  --teal: #b8e3cb;
  --line: #354c4c;
  --border: #354c4c;
  --wash: #172b2d;
  --psc-surface: #18272a;
  --psc-surface-raised: #1d3033;
  --psc-mint: #c5e9d1;
  --psc-deep: #0c3037;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .site-header { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .brand img { background: #e9eeea; }
html[data-theme="dark"] a:focus-visible { outline-color: #a2dbca; }

/* Cards and surfaces: white in the light look. */
html[data-theme="dark"] .learning-card,
html[data-theme="dark"] .directory-card,
html[data-theme="dark"] .resource,
html[data-theme="dark"] .about-topic,
html[data-theme="dark"] .skip,
html[data-theme="dark"] .skip-link { background: var(--psc-surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .resource:hover { background: var(--psc-surface-raised); border-color: #6e8884; }
html[data-theme="dark"] .resource-icon { background: #203939; color: var(--psc-mint); }
html[data-theme="dark"] .resource-icon-pro { background: #3a3022; color: #f4d0a2; }

/* Bands: pale green washes in the light look. */
html[data-theme="dark"] .resource-band,
html[data-theme="dark"] .about-band,
html[data-theme="dark"] .club-details,
html[data-theme="dark"] .learning-band,
html[data-theme="dark"] .founder-jump { background: var(--wash); border-color: #2c4443; }
html[data-theme="dark"] .club-details > div + div { border-color: #2c4443; }
html[data-theme="dark"] .hero-photo { background-color: #203939; }

/* Warm and violet cards keep their character, darker. */
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .learning-card--gallery { background: #24231c; border-color: #4a4636; color: var(--ink); }
html[data-theme="dark"] .ask-card { background: #241f33; border-color: #3d3656; }
html[data-theme="dark"] .ask-card .card-title { color: #d9cdea; }

/* Buttons: mint on dark green; the gold and outline buttons on the dark hero are unchanged. */
html[data-theme="dark"] .button:not(.button-gold):not(.button-ghost):not(.button-light) { background: var(--psc-mint); color: var(--psc-deep); }
html[data-theme="dark"] .button:not(.button-gold):not(.button-ghost):not(.button-light):hover { background: #d8f2e1; }
html[data-theme="dark"] .button-light { background: transparent; color: var(--ink); border-color: #6e8884; }
html[data-theme="dark"] .video-card .button:hover { background: #ffe3be; }

/* Forms. */
html[data-theme="dark"] .hero-search input { background: var(--psc-surface); color: var(--ink); border-color: #4b6564; }
html[data-theme="dark"] .hero-search input::placeholder { color: #8fa7a1; }
html[data-theme="dark"] .hero-search input:focus-visible { outline-color: #a2dbca; }

/* Deep teal bands (hero, video card, footer) stay deep teal: a touch of edge on dark paper. */
html[data-theme="dark"] .video-card,
html[data-theme="dark"] .learning-card--video { box-shadow: inset 0 0 0 1px #2c4a49; }

/* Header photos in PSC green: a dark and a light grade of the same photo. Only the one for the
   current look downloads; switching the look swaps it. */
.hero-photo.psc-hero-photo,
.hero-visual.psc-hero-photo {
  background-color: #17423c;
  background-image: url("/psc-landing-v6/hero-home-dark.webp");
  background-position: 50% 45%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-visual.psc-hero-about { background-image: url("/psc-landing-v6/hero-about-dark.webp"); background-position: 45% 40%; }
html[data-theme="light"] .hero-photo.psc-hero-home { background-color: #d6e9df; background-image: url("/psc-landing-v6/hero-home-light.webp"); }
html[data-theme="light"] .hero-visual.psc-hero-about { background-color: #d6e9df; background-image: url("/psc-landing-v6/hero-about-light.webp"); }