/* ==========================================================================
   House of Olives — Design tokens
   ========================================================================== */
:root {
  /* Colour */
  --green-900: #1f2a11;
  --green-800: #283516;          /* primary deep olive green */
  --green-700: #2e3b1d;
  --green-600: #3a4a27;
  --green-500: #4f6135;
  --sage-400: #8a9a6a;
  --sage-300: #a9b78a;
  --sage-200: #cdd5b8;

  --cream-100: #f6f1e7;
  --cream-200: #f4efe4;
  --cream-300: #ece5d5;
  --cream-400: #ddd3bd;

  --gold-500: #c5a04b;
  --gold-400: #d4b567;
  --gold-300: #e2cb8f;

  --ink-900: #24251f;
  --ink-700: #4a4b42;
  --ink-500: #6b6c61;

  --text-light: #f4efe4;
  --text-light-muted: rgba(244, 239, 228, 0.78);

  /* Section themes (set per section) */
  --bg: var(--green-800);
  --fg: var(--text-light);
  --fg-muted: var(--text-light-muted);
  --accent: var(--gold-500);
  --branch: rgba(230, 220, 196, 0.72);
  --rule: rgba(197, 160, 75, 0.55);

  /* Typography */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Allura", "Brush Script MT", cursive;

  --fs-hero: clamp(2.6rem, 1.4rem + 4.2vw, 5.1rem);
  --fs-h2: clamp(2.2rem, 1.4rem + 2.8vw, 3.9rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem);
  --fs-lead: clamp(1.02rem, 0.96rem + 0.25vw, 1.18rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 6vw + 2rem, 8.5rem);
  --header-h: 88px;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 50px -20px rgba(15, 20, 8, 0.55);
  --shadow-card: 0 10px 30px -14px rgba(15, 20, 8, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur: 420ms;
  --dur-slow: 900ms;
}

/* Section colour themes ---------------------------------------------------- */
.theme-green {
  --bg: var(--green-800);
  --fg: var(--text-light);
  --fg-muted: var(--text-light-muted);
  --accent: var(--gold-400);
  --branch: rgba(230, 220, 196, 0.62);
  --rule: rgba(212, 181, 103, 0.55);
  --card-bg: rgba(255, 255, 255, 0.045);
  --card-border: rgba(212, 181, 103, 0.35);
  background-color: var(--bg);
  color: var(--fg);
}

.theme-light {
  --bg: var(--cream-100);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-700);
  --accent: var(--green-700);
  --branch: rgba(120, 138, 88, 0.55);
  --rule: rgba(160, 140, 90, 0.5);
  --card-bg: rgba(255, 255, 255, 0.45);
  --card-border: rgba(160, 140, 90, 0.4);
  background-color: var(--bg);
  color: var(--fg);
}