/*
  Theme tokens:
  --theme-bg              : page background
  --theme-surface         : elevated surface fill (cards)
  --theme-heading         : headings and strong text
  --theme-text            : primary body text
  --theme-muted           : secondary text
  --theme-link / --theme-link-hover : links and hover state
  --theme-border          : subtle outlines
  --theme-shadow          : default card shadow
  --theme-button-bg       : primary button fill (can be a gradient)
  --theme-button-text     : text/icon color on primary buttons
  --theme-veil            : overlay color for sections with bright imagery
*/

:root {
  --theme-bg: #f8f3ec;
  --theme-surface: rgba(255, 252, 247, 0.96);
  --theme-heading: #1a1009;
  --theme-text: #2b1c12;
  --theme-muted: #615046;
  --theme-link: #a1572b;
  --theme-link-hover: #c07137;
  --theme-border: rgba(35, 20, 10, 0.12);
  --theme-shadow: 0 24px 48px rgba(33, 17, 9, 0.08);
  --theme-button-bg: linear-gradient(90deg, #f1cb9e, #dfa673);
  --theme-button-text: #241309;
  --theme-veil: rgba(255, 255, 255, 0.45);
}

[data_theme="dark"] {
  --theme-bg: #15100c;
  --theme-surface: rgba(32, 22, 16, 0.9);
  --theme-heading: #f9ede0;
  --theme-text: #e7dacd;
  --theme-muted: rgba(231, 218, 205, 0.74);
  --theme-link: #f0b27d;
  --theme-link-hover: #ffd4a5;
  --theme-border: rgba(255, 255, 255, 0.18);
  --theme-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  --theme-button-bg: linear-gradient(90deg, #f0c38f, #d48f5c);
  --theme-button-text: #1b0e06;
  --theme-veil: rgba(5, 5, 5, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data_theme]) {
    --theme-bg: #15100c;
    --theme-surface: rgba(32, 22, 16, 0.9);
    --theme-heading: #f9ede0;
    --theme-text: #e7dacd;
    --theme-muted: rgba(231, 218, 205, 0.74);
    --theme-link: #f0b27d;
    --theme-link-hover: #ffd4a5;
    --theme-border: rgba(255, 255, 255, 0.18);
    --theme-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    --theme-button-bg: linear-gradient(90deg, #f0c38f, #d48f5c);
    --theme-button-text: #1b0e06;
    --theme-veil: rgba(5, 5, 5, 0.55);
  }
}

html,
body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  transition: background-color 220ms ease, color 220ms ease;
}

h1,
h2,
h3 {
  color: var(--theme-heading);
  transition: color 220ms ease;
}

p,
li,
small {
  color: var(--theme-muted);
  transition: color 220ms ease;
}

a {
  color: var(--theme-link);
  transition: color 200ms ease;
}

a:hover,
a:focus-visible {
  color: var(--theme-link-hover);
}

.masthead,
.masthead a,
.primary-nav a,
.site-footer,
.site-footer__text {
  color: var(--theme-text);
  transition: color 220ms ease, background-color 220ms ease;
}

.card,
.card.card--stage,
.card.card--moment,
.card.card--expandable,
.moment-card,
.retreat-card,
.retreat-card__body {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.card .card__title,
.card .card__excerpt,
.moment-card .card-title,
.moment-card .card-text,
.retreat-card__title,
.retreat-card__text,
.retreat-card__meta {
  color: var(--theme-text);
}

#program,
#moments {
  color: var(--theme-text);
}

.section_veil {
  position: relative;
  overflow: hidden;
}

.section_veil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--theme-veil);
  z-index: 1;
}

.section_veil > :not(.bg_wrap) {
  position: relative;
  z-index: 2;
}

.section_veil .bg_wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
