/* ==========================================================
   variables.css — CHANGE THE LOOK OF THE WHOLE SITE HERE.
   Every colour, font, spacing, radius and shadow lives below.
   ========================================================== */
:root {
  /* Brand colours */
  --color-forest: #14352b;        /* deep forest green */
  --color-forest-deep: #0d241d;   /* darker green (header, footer) */
  --color-midnight: #0e1a30;      /* midnight blue */
  --color-ivory: #f7f2e6;         /* warm ivory page background */
  --color-ivory-deep: #ece4cf;    /* alternate section background */
  --color-gold: #b8975a;          /* antique gold: borders, icons, lines */
  --color-gold-bright: #d4b26f;   /* gold used on dark backgrounds + buttons */

  /* Text */
  --color-ink: #1d2a25;
  --color-ink-soft: #4a5750;
  --color-on-dark: #f7f2e6;
  --color-on-dark-soft: #cfd6cc;

  /* States */
  --color-error: #9b2c2c;
  --color-success: #1f6b4a;
  --color-focus: #8a6a2b;

  /* Fonts (Latin + Devanagari fallbacks) */
  --font-heading: "Cormorant Garamond", "Noto Serif Devanagari", Georgia, serif;
  --font-body: "Source Sans 3", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-base: 1.0625rem;
  --lh-body: 1.7;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Shape + depth */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 30px rgba(13, 36, 29, 0.14);
  --border-line: 1px solid rgba(184, 151, 90, 0.45);

  /* Layout + motion */
  --content-width: 68rem;
  --reading-width: 42rem;
  --header-height: 4.5rem;
  --speed: 0.25s;          /* hover / focus transitions */
  --speed-slow: 160s;      /* one full turn of the hero mandala */
}