/*
 * theme.css — True Worshippers Evangelical Assembly's design-system values.
 *
 * Old-money mixed with warm-craft: cream page, ink text, wine-red links,
 * a gold filled action. 2px corners, tier-0 shadows, a serif display.
 */

:root {
  --canvas: #f6f1e4;
  --surface: #fbf9f3;
  --surface-2: #efe4c9;
  --border: #e2d5b3;
  --border-strong: #c9b382;
  --ink: #241a15;
  --muted: #655f58;
  --accent: #c9972b;
  --accent-hover: #b3841f;
  --accent-ink: #241a15;
  --accent-text: #6b1e3c;
  --accent-strong: #795c1b;
  --accent-soft: #f0e2bd;
  --accent-border: #d8bd85;
  --success: #2f6b3f;
  --success-ink: #ffffff;
  --success-soft: #e3ecdf;
  --success-strong: #2a5c37;
  --warning: #a25a1f;
  --warning-ink: #ffffff;
  --warning-soft: #f2e3d1;
  --warning-strong: #8f4e19;
  --danger: #9a2b28;
  --danger-ink: #ffffff;
  --danger-soft: #f1ddd8;
  --danger-strong: #8a2522;
  --chart-1: #c9972b;
  --chart-2: #6b1e3c;
  --chart-3: #2f6b3f;
  --chart-4: #4a5a8a;
  --chart-5: #8a4a2a;
  --chart-6: #795c1b;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 2px 0 0 rgba(36, 26, 15, 0.06), 0 10px 22px -14px rgba(36, 26, 15, 0.35);
  --shadow-raised: 0 12px 30px -8px rgba(36, 26, 21, 0.22);
  --shadow-btn: none;
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 68ch;

  --x-wine: #6b1e3c;
  --x-wine-ink: #f6f1e4;
  --x-give-bg: #2a1116;
  --x-give-ink: #f5ecd9;
}

html[data-theme="dark"] {
  --canvas: #1b120f;
  --surface: #241a15;
  --surface-2: #2d201a;
  --border: #40301f;
  --border-strong: #5c4728;
  --ink: #f3ead9;
  --muted: #c3b39c;
  --accent: #d9a53c;
  --accent-hover: #e6b658;
  --accent-ink: #1b120f;
  --accent-text: #e3a0bb;
  --accent-strong: #e3c07a;
  --accent-soft: #3a2c15;
  --accent-border: #6b4f22;
  --success: #6fae7f;
  --success-ink: #10190f;
  --success-soft: #203324;
  --success-strong: #86c294;
  --warning: #d99458;
  --warning-ink: #1b120f;
  --warning-soft: #3a2818;
  --warning-strong: #e3ac78;
  --danger: #d38884;
  --danger-ink: #1b120f;
  --danger-soft: #3a201e;
  --danger-strong: #e2a29e;
  --chart-1: #d9a53c;
  --chart-2: #e3a0bb;
  --chart-3: #86c294;
  --chart-4: #9db0e8;
  --chart-5: #d99458;
  --chart-6: #e3c07a;

  --x-wine: #7a2444;
  --x-wine-ink: #f5ecd9;
  --x-give-bg: #150c0a;
  --x-give-ink: #f0e4cf;
}

/*
 * app.css — True Worshippers Evangelical Assembly.
 *
 * The bands no primitive covers (the wine hero, the tinted connect strip,
 * the dark giving statement), the membership card's own polish, and the
 * one hero-only entrance the brief calls for. Tokens only.
 */

/* ---- The wine hero band ---------------------------------------------- */
.band-hero {
  background: var(--x-wine);
  color: var(--x-wine-ink);
}

/* ---- The tinted connect band ------------------------------------------ */
.band-connect {
  background: var(--accent-soft);
}

/* ---- The dark giving statement ---------------------------------------- */
.band-give {
  background: var(--x-give-bg);
  color: var(--x-give-ink);
}

/* ---- The membership card ------------------------------------------------
   A little more presence than a bare .card: a warm rule at the top like the
   edge of a printed card. */
.membership-card {
  position: relative;
  border-top: 3px solid var(--accent);
}

/* ---- Hero-only entrance -------------------------------------------------
   The one moment that moves: the hero's crest, times and mission line rise
   together as the page opens. Rests fully visible so a failed script, a
   screenshot or a crawler still sees the finished hero. Re-armed by app.js
   on app:inview; never runs again after. */
[data-inview] {
  opacity: 0;
  transform: translateY(14px);
}
[data-inview].is-visible {
  animation: hero-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
html.reduced-motion [data-inview] {
  opacity: 1;
  transform: none;
  animation: none;
}