/* ============================================================
   Mega Tea Fundraiser — Shared Design Tokens
   ------------------------------------------------------------
   Single source of truth for the look-and-feel across all
   three pages (index / admin / distributor).

   Edit colors here to change the theme everywhere.
   The order form (index) also exposes --primary and --accent
   via in-page color pickers; those override at runtime.
   ============================================================ */

:root {
  /* ============================================================
     BOURBON & SAGE — Design tokens v2
     Gold/bronze remain the brand spine. Sage grounds it in wellness.
     Coral is the one true "energy" color — used on live indicators
     and the most-important call-to-action only.
     ============================================================ */

  /* ---- ORG-CUSTOMIZABLE THEME (changed at runtime by color pickers on index) ---- */
  --primary:        #d4af37;   /* classic metallic gold */
  --accent:         #7c5314;   /* deep bronze */

  /* Derived helpers (also overwritten by JS when theme changes) */
  --primary-glow:   rgba(212, 175, 55, 0.35);
  --accent-glow:    rgba(124, 83, 20, 0.35);
  --primary-soft:   rgba(212, 175, 55, 0.14);
  --accent-soft:    rgba(124, 83, 20, 0.14);

  /* ---- NEW: SECONDARY PALETTE — sage + coral. NEVER overwritten by the
     per-fundraiser theme picker (those tokens are reserved for --primary
     and --accent only). Use these for trust copy, "live" indicators,
     "new / urgent" badges. ---- */
  --sage:           #2d4a3a;   /* deep wellness green */
  --sage-soft:      rgba(45, 74, 58, 0.10);
  --sage-glow:      rgba(45, 74, 58, 0.25);
  --coral:          #e07a3c;   /* one true energy color */
  --coral-soft:     rgba(224, 122, 60, 0.14);
  --coral-glow:     rgba(224, 122, 60, 0.40);
  --cream:          #f5efe1;   /* warmer than #f7f7fb; used in light mode */

  /* ---- FIXED DARK PALETTE ---- */
  --bg-0:           #07070c;
  --bg-1:           #0e0e18;
  --bg-2:           #161624;
  --surface:        rgba(22, 22, 36, 0.72);
  --surface-2:      rgba(30, 30, 46, 0.85);
  --border:         rgba(255, 255, 255, 0.08);
  --border-hi:      rgba(255, 255, 255, 0.16);
  --text:           #f5f5fa;
  --muted:          #9aa0b4;

  /* ---- STATUS COLORS ---- */
  --danger:         #f43f5e;
  --success:        #22d3ee;
  --warn:           #fbbf24;

  /* ============================================================
     TYPOGRAPHY — Fraunces (display serif) + Inter (body sans) +
     Space Grotesk (numerical stats). All Google Fonts; the
     <link> tags are added per-page (index/admin/distributor).
     We keep system-font fallbacks so the page stays readable even
     if the Google Fonts CDN is offline.
     ============================================================ */
  --font-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-stat:      'Space Grotesk', 'Inter', -apple-system, sans-serif;
}

/* ---- LIGHT MODE PALETTE (toggled by adding body.light-mode; used on index) ---- */
body.light-mode {
  /* Warmer cream instead of cold off-white. Hero background gradient picks
     this up so the whole page feels paper-textured rather than digital. */
  --bg-0:           var(--cream);
  --bg-1:           #ffffff;
  --bg-2:           #efe7d4;
  --surface:        rgba(255, 255, 255, 0.85);
  --surface-2:      rgba(245, 239, 225, 0.92);
  --border:         rgba(45, 30, 8, 0.10);
  --border-hi:      rgba(45, 30, 8, 0.20);
  --text:           #1a1a28;
  --muted:          #6b5e4a;        /* warmer muted than slate gray */
  --danger:         #dc2626;
  --success:        var(--sage);
}

/* ---- UNIVERSAL RESET ---- */
* { box-sizing: border-box; }

/* Smooth anchor jumps (e.g., hero "How it works" → #howItWorks). Margin-top
   on the target so the section title doesn't get hidden under any fixed UI. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Apply Inter to all body text by default. Display serif is opt-in per element
   (set font-family on the headline class). This keeps body text crisp and
   reserves the serif voice for headlines + key copy. */
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}