/*
 * theme.css — TWEA Worldwide's design-system values.
 * Royal and clear: deep royal blue for trust and reverence, gold for glory,
 * an off-white ground and near-black-grey text — a modern church-app
 * palette, not a printed ledger. Rounded cards, pill buttons, a soft
 * elevation. Opens light; the dark set is a deep midnight-blue sanctuary
 * with the gold carrying more of the weight.
 */

:root {
  --canvas: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #eceef7;
  --border: #dfe1ee;
  --border-strong: #c3c8e2;
  --ink: #212121;
  --muted: #5b5d68;
  --accent: #1a237e;
  --accent-hover: #131a5e;
  --accent-ink: #ffffff;
  --accent-text: #1a237e;
  --accent-strong: #7a5c08;
  --accent-soft: #eceef7;
  --accent-border: #c3c8e2;
  --success: #1e7d4a;
  --success-ink: #ffffff;
  --success-soft: #e0f2e8;
  --success-strong: #176339;
  --warning: #a9760a;
  --warning-ink: #ffffff;
  --warning-soft: #fbedd0;
  --warning-strong: #8a6108;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #fbe2e0;
  --danger-strong: #8f1e18;
  --chart-1: #1a237e;
  --chart-2: #ffd700;
  --chart-3: #5b5d68;
  --chart-4: #3949ab;
  --chart-5: #a9820a;
  --chart-6: #7986cb;

  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 12px 28px -18px rgba(26, 35, 126, 0.28);
  --shadow-raised: 0 20px 48px -20px rgba(26, 35, 126, 0.38);
  --shadow-btn: 0 8px 18px -10px rgba(26, 35, 126, 0.45);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #0e1233;
  --surface: #161b47;
  --surface-2: #1e2456;
  --border: #2e3566;
  --border-strong: #444c85;
  --ink: #f2f2f7;
  --muted: #b3b6d6;
  --accent: #ffd700;
  --accent-hover: #ffe454;
  --accent-ink: #1a1400;
  --accent-text: #ffd966;
  --accent-strong: #ffd700;
  --accent-soft: #2b2a12;
  --accent-border: #5a5423;
  --success: #4bb87f;
  --success-ink: #06170e;
  --success-soft: #163828;
  --success-strong: #7cd6a4;
  --warning: #e0b23f;
  --warning-ink: #241a02;
  --warning-soft: #3a2c0c;
  --warning-strong: #f0c85f;
  --danger: #e2685f;
  --danger-ink: #240705;
  --danger-soft: #3a1512;
  --danger-strong: #f09189;
  --chart-1: #ffd700;
  --chart-2: #7986cb;
  --chart-3: #b3b6d6;
  --chart-4: #ffe454;
  --chart-5: #9fa8da;
  --chart-6: #5c6bc0;
}

/*
 * app.css — TWEA Worldwide's own styles. A clean, modern church-app ground:
 * a faint royal-blue glow behind the hero, smooth in-page jumps for the
 * anchor nav, and the one moment that moves — the hero headline typing
 * itself out once on load.
 */

html {
  scroll-behavior: smooth;
}
html.reduced-motion {
  scroll-behavior: auto;
}

body {
  background-image: radial-gradient(
    ellipse 60% 40% at 50% -10%,
    color-mix(in srgb, var(--accent) 10%, transparent),
    transparent 70%
  );
  background-repeat: no-repeat;
}

/* ---- Typewriter headline --------------------------------------------------
   The ONE moment on the page that moves. The real text is already in the
   markup — it RESTS VISIBLE, so a visitor with no JS, and every search
   engine, reads it as-is — and app.js only touches it once armed by the
   platform's data-inview → "app:inview" mechanism (see app.js): it clears
   the text and reveals it character by character behind a blinking caret,
   then removes the cursor. `.type-reveal` is this app's own marker for
   which element gets the treatment; nothing else on the page animates. */
.type-reveal {
  position: relative;
}
.type-reveal.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  margin-left: 0.08em;
  height: 0.85em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: twea-caret 900ms steps(1) infinite;
}
@keyframes twea-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
html.reduced-motion .type-reveal.is-typing::after {
  animation: none;
  opacity: 0;
}