/* ==========================================================================
   Houses of Worship: light palette
   Active when <html data-theme="light">, which houses-of-worship.html sets.
   The palette is just the :root variables from style.css redefined.
   To switch the page back to the dark palette, remove data-theme="light"
   from its <html> tag.
   ========================================================================== */

html[data-theme="light"] {
  --black: #f6f4ef;          /* page background (warm off-white) */
  --dark: #ffffff;           /* cards, alternate sections */
  --dark-card: #ffffff;
  --gray-800: #e9e4dc;       /* muted fills (chat bubbles, tags) */
  --gray-600: #a39d93;
  --gray-400: #5f5950;       /* secondary text */
  --gray-200: #38332d;
  --white: #1a1816;          /* primary text */
  --blue: #00893f;           /* brand green, darkened for contrast on light */
  --blue-hover: #009a47;
  --blue-deep: #00733a;
  --text-strong: #1a1816;
  --btn-outline: rgba(26, 24, 22, 0.28);
  --btn-outline-hover: rgba(26, 24, 22, 0.55);
  --sr-blue-text: rgb(53, 111, 146);

  --fg-rgb: 26, 24, 22;      /* hairlines and tints become dark-on-light */
  --bg-rgb: 246, 244, 239;   /* matches --black */
  --surface-rgb: 255, 255, 255;
  --brand-rgb: 0, 137, 63;

  --shadow-lg: 0 25px 60px rgba(60,45,30,0.16);
  --shadow-md: 0 25px 60px rgba(60,45,30,0.12);
  --shadow-pop: 0 20px 50px rgba(60,45,30,0.14);
  --shadow-btn: 0 4px 16px rgba(60,45,30,0.18);
  --overlay: rgba(30, 26, 22, 0.45);

  color-scheme: light;
}

/* Things a variable can't express */
html[data-theme="light"] .nav-logo img { content: url('../img/convrs_logo_dark.svg'); }
html[data-theme="light"] .how-hero-bg { opacity: 0.55; }
html[data-theme="light"] .preview-nav { background: #fff; color: var(--white); }
html[data-theme="light"] .preview-nav:hover { background: var(--black); }