/* ============================================================
   The Fruitful Bough Foundation — Design Tokens
   Single source of truth for color, type, radius, motion.
   Import this BEFORE styles.css.
   ============================================================ */

:root {
  /* ---- Color system ---- */
  --bg-deep: #1a1b00; /* Deep Citron — page bg, footer, text on light buttons */
  --bg-rich: #333b00; /* Rich Lime — cards, panels, alternates, hover fills */
  --accent-muted: #b0b203; /* Citron — dots, icons, hairlines, bars (never small text) */
  --accent-bright: #e3fe00; /* Soft Lime — Donate CTA, key stats, active/focus ONLY */
  --text-light: #f7f9e3; /* Pale Lime — headlines, key text on dark */

  --text-body: rgba(239, 253, 105, 0.85);
  --text-secondary: rgba(239, 253, 105, 0.6);
  --hairline: rgba(239, 253, 105, 0.12);
  --glow-soft: rgba(227, 254, 0, 0.15);
  --glass-bg: rgba(26, 27, 0, 0.7);

  /* ---- Typography ---- */
  --font-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", "Geist", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);
  --fs-stat: clamp(2.25rem, 4vw, 3.5rem);
  --fs-body: 1.0625rem; /* 17px */
  --fs-eyebrow: 0.6875rem; /* 11px */

  --lh-body: 1.6;
  --lh-tight: 1.08;
  --ls-eyebrow: 0.12em;

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-panel: 24px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fade: 600ms;
  --dur-step: 5000ms; /* stepper auto-advance interval */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fade: 0ms;
    --dur-step: 0ms;
  }
}