/* ─────────────────────────────────────────────────────────────────────────────
   Find Peace · Outreach Stylesheet
   ─────────────────────────────────────────────────────────────────────────────
   The seeker's space. Separate from the church site (shalom.css).
   Calm by design. Auto-respects the visitor's OS dark mode preference.
   Does NOT follow site themes — Find Peace stays consistent regardless of
   what the church admin sets for the inreach experience.

   Color values match the ORIGINAL Find Peace design (pre-Phase B).
   Notably: dark mode uses parchment cream (#fefcef) for text, not neutral gray.
   The intent is warm — a softly lit page in a dark room, not clinical contrast.

   Phase B (separation) — 2026-05-23.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS (LIGHT MODE) ──────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:          #fefcef;
  --bg-elevated: #f7f1d8;
  --parchment:   #fefcef;
  --cream:       #f7f1d8;
  --line:        rgba(26, 35, 50, 0.10);
  --line-strong: color-mix(in srgb, #1a2332 18%, transparent);

  /* Ink (text) — original values */
  --ink:         #1a2332;
  --ink-soft:    #334455;
  --ink-faint:   rgba(26, 35, 50, 0.45);

  /* Accents — in light mode, brass tokens map to teal so the highlight
     reads as cool/calm (not warm brass). Teal accent on parchment. */
  --teal:         #03617A;
  --teal-bright:  #048aaa;
  --brass:        #03617A;   /* intentional: brass = teal in light mode */
  --brass-bright: #048aaa;
}

/* ── DESIGN TOKENS (DARK MODE — follows OS preference) ───────────────────── */
/* Triggered when the visitor's iPhone/Mac/Android is set to dark mode.
   Background goes near-black; text becomes parchment cream — the original
   "softly lit page in a dark room" feel. Brass restores to its warm value
   (reads beautifully on the deep background). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0a1014;
    --bg-elevated: #111820;
    --parchment:   #0a1014;
    --cream:       #111820;
    --line:        rgba(254, 252, 239, 0.10);
    --line-strong: rgba(254, 252, 239, 0.15);

    /* Text — parchment cream for warmth, not neutral gray.
       Contrast: #fefcef on #0a1014 ≈ 16.4:1 (WCAG AAA). */
    --ink:         #fefcef;
    --ink-soft:    rgba(254, 252, 239, 0.65);
    --ink-faint:   rgba(254, 252, 239, 0.35);

    /* Accents — warm brass restored, reads well on dark. */
    --brass:        #b08d3c;
    --brass-bright: #d4a94a;
    /* --teal and --teal-bright intentionally NOT redefined here —
       they inherit from light :root (used only for subtle accents in dark mode). */
  }
}

/* ── FONT FACE ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Xtreem';
  src: url('/fonts/XtreemMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

/* ── UNIVERSAL RESET ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }