/* Pathway – dark version (Nov 2026). Loads after site.css, refresh.css and the Look colors, on public pages only.
   It switches on by itself when the visitor's phone or computer is set to dark mode.
   Most of the site's colors come from the variables below. Text that uses the accent color is written as
   var(--accent-ink, var(--accent)), so it uses a lighter tint of the accent here and the accent itself in light mode.
   The accent (Admin → Look, church seasons) still fills buttons and bands. */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #161113; --sand: #1B1517; --white: #221A1D; --tan: #2A2125; --tan-2: #3A2E33; --tan-line: #5A4A51;
    --line: #342A2E; --ink: #F3EEEA; --muted: #D2C8C4; --muted-2: #BDB2AE;
    --rose: color-mix(in oklab, var(--accent) 28%, #161113);         /* tinted panels, from the accent */
    --accent-ink: color-mix(in oklab, var(--accent) 42%, #fff);       /* accent as text on dark */
    --accent-line: color-mix(in oklab, var(--accent) 60%, #fff);      /* accent as an outline on dark */
    --shadow-sm: 0 8px 24px rgba(0,0,0,.35); --shadow-md: 0 14px 34px rgba(0,0,0,.4); --shadow-lg: 0 22px 50px rgba(0,0,0,.45);
  }

  /* Accent text that sits on white even in dark mode keeps the full accent */
  .btn-light, .btn-ghost:hover, .ev-card.is-active .ev-more, .hero-full .btn-light:hover { color: var(--accent); }
  .btn-light:hover { color: var(--accent-dk); }
  /* Outlines in the accent */
  .btn-outline, .sm-go, .ev-more, .ev-arrows button { border-color: var(--accent-line); }
  .btn-outline:hover, .sermon-mini:hover .sm-go { color: #fff; border-color: var(--accent); }
  .ev-arrows .ev-next, .ev-arrows button:hover { color: #fff; border-color: var(--accent); }
  .cd-ring { border-color: var(--accent-line); }
  :focus-visible, .scale input:focus-visible + span { outline-color: var(--accent-line); }
  .cal td.today { box-shadow: inset 0 0 0 2px var(--accent-line); }
  .btn-dark:hover { color: var(--cream); }

  /* Places that hard-code white or use the text color as a background */
  .next-card, .sermon-feature, .sermon-mini, .ev-arrows button:not(.ev-next):not(:hover), .ev-card, .group-row .when,
  .give-split, .touch-form, .touch-form input[type=email], .pb-prog { background: var(--white); }
  .ev-card.is-active { background: var(--accent); }
  .ev-card.is-active .ev-more { background: #fff; border-color: #fff; }
  .sf-media, .video-thumb { background: #0D0A0B; }
  .list-row { border-bottom-color: var(--line); }
  .partners a { color: var(--muted-2); }
  .cal td.other { background: #1D1719; color: #7D7075; }
  .cal .e.group { background: #2D2427; }
  .alert-ok { background: #16301F; color: #CDEBD5; }
  .alert-err { color: #F6D5DD; }
  .touch-form .btn:hover { background: #000; border-color: #000; }
  .tabs a:not([aria-current="page"]):hover, .chip:not([aria-pressed="true"]):hover { border-color: var(--accent-line); }
  #gifts-app .quiz-bar { background: rgba(22,17,19,.96); }
  .site-header { box-shadow: 0 2px 18px rgba(0,0,0,.5); }

  /* Forms */
  input::placeholder, textarea::placeholder { color: #8E8287; }

  /* Soften large photos a touch so they don't glare */
  .photo-card img, .group-card .ph img, .split > div > img { filter: brightness(.92); }
}