:root {
  --color-ink: #1a1f2e;
  --color-parchment: #f7f3ea;
  /* Franciscan green -- replaces the earlier navy primary per Jay's direct
     feedback ("I don't like the dark blue... prefer a franciscan green").
     Pairs with the gold accent and the warm wood/stone tones actually
     present in the reference hero photo (sampled directly, not guessed --
     it's dominated by browns/golds, not blue, so navy was fighting the
     photo and green sits with it instead). */
  --color-franciscan-green: #1f3d2e;
  --color-franciscan-green-dark: #142822;
  /* Parish Mode theme (2026-08-08, Jay: "a darker red for parish access --
     like the red in the Diocese of Maryland's shield -- clear if you are
     in the Parish mode or the Diocesan Mode"). A reasonable placeholder
     heraldic red, NOT sampled from the actual shield the way the
     Franciscan green above was sampled from the real hero photo -- swap
     these two values for an exact match once Jay can share that image.
     base.css's body.parish-mode rule overrides --color-franciscan-green
     itself with these, so every existing rule that already references it
     (headers, links, buttons, badges) retints automatically. */
  --color-parish-red: #7a1f2b;
  --color-parish-red-dark: #591620;
  /* Cornerstone Mode theme (2026-08-16, Jay: "make the Cornerstone banner
     bar a pretty rich dark blue") -- distinct from Parish Mode's red, since
     the two are different concepts (a served parish's own portal view vs.
     a Cornerstone Franciscan Ministries staffer working a served parish's
     full AP process). Same override mechanism as Parish Mode: base.css's
     body.cornerstone-mode rule swaps --color-franciscan-green itself, so
     every existing rule retints automatically, no new rules needed. */
  --color-cornerstone-blue: #14294d;
  --color-cornerstone-blue-dark: #0b1830;
  /* Dev/Prod Split Plan.md (2026-07-31): the dev environment's own persistent
     warning banner -- deliberately a bright hazard red, not sampled from
     anywhere in the app's own earthy palette, and deliberately distinct from
     --color-parish-red (a deep maroon) so the two signals are never confused
     with each other. This must look jarring, not aesthetic -- that's the
     whole point. */
  --color-dev-env: #e0201f;
  --color-gold: #c9a227;
  --color-gold-light: #e8c766;
  --color-card-bg: #ffffff;
  --color-border: #ddd4c0;
  --color-text-muted: #6b6455;
  --color-danger: #9c0006;
  --color-success: #1f6b3d;
  --color-warning: #7a4a00;
  --color-warning-bg: #f5c04a;

  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-card: 0 1px 3px rgba(26, 31, 46, 0.08), 0 4px 12px rgba(26, 31, 46, 0.06);
  --shadow-card-hover: 0 2px 6px rgba(26, 31, 46, 0.10), 0 8px 24px rgba(26, 31, 46, 0.10);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
}