/* ============================================================
   THE PATH TO WATER — Base
   Design tokens, reset, typography, animations
   ============================================================ */

/* ── Design Tokens ── */
:root {
  /* Backgrounds */
  --bg: #faf8f4;
  --bg-section: #ffffff;
  --bg-aside: #f5f1eb;
  --bg-barakah: #eef4ec;

  /* Text */
  --text: #2c2a26;
  --text-light: #6b6560;
  --text-lighter: #9a938c;

  /* Accents */
  --accent: #2d6a4f;
  --accent-light: #40916c;
  --accent-warm: #b07d3b;
  --accent-warm-light: #d4a95a;

  /* Borders & Shadows */
  --border: #e8e3db;
  --border-light: #f0ece5;
  --gold: #c49b3c;
  --gold-light: #f5edda;
  --shadow: 0 2px 20px rgba(44,42,38,0.06);
  --shadow-hover: 0 4px 30px rgba(44,42,38,0.1);

  /* Layout */
  --radius: 12px;

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Source Sans 3', -apple-system, sans-serif;
}


/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 17px; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}


/* ── Shared Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bobDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}