/* ==============================================
   BASE CSS (Variables, Reset, Typography, Utils)
=============================================== */
:root {
  /* Brand Colors */
  --primary: #215a37;
  --primary-light: #2e7d52;
  --primary-dark: #1a4729;
  --secondary: #72c173;
  --secondary-light: #8dd28e;
  --accent: #72c173;
  
  /* Story Page Specific Colors */
  --story-primary: #215a37;
  --story-accent: #72c173;
  --story-light: #f8fff9;
  --story-gold: #c9a227;
  
  /* Background & UI Colors */
  --bg-white: #ffffff;
  --bg-cream: #f8fff9;
  --bg-light-green: #f0f7f2;
  --bg-dark: #1a2a1f;
  --bg-dark-deep: #141f17;
  --light: #f8fff9;
  --dark: #1a2a1f;
  --gray: #5d7565;
  
  /* Effects & Layout */
  --shadow: 0 20px 40px rgba(33, 90, 55, 0.12);
  --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--secondary-light) 100%);
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { font-family: 'Montserrat', sans-serif; line-height: 1.7; color: var(--dark); background-color: var(--bg-cream); overflow-x: hidden; }
body.menu-open { overflow: hidden; }

h1, h2, h3, h4, h5 { font-weight: 800; line-height: 1.2; }
h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: -0.02em; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.skip-link { position: absolute; left: -999px; top: 12px; background: white; color: var(--dark); padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); z-index: 2000; }
.skip-link:focus { left: 12px; outline: 3px solid var(--accent); outline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* Global Keyframes */
@keyframes floatUp { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-20px) rotate(15deg); } }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(114, 193, 115, 0.4); } 50% { box-shadow: 0 0 40px rgba(114, 193, 115, 0.8), 0 0 60px rgba(114, 193, 115, 0.4); } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes morph { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } }

/* Header Donate Button Hover Match */
.nav-cta { transition: all 0.3s ease; }
.nav-cta:hover { background-color: var(--primary-dark); color: white; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(33, 90, 55, 0.2); }