/*
  Impact Kilimanjaro — Design Tokens
  ----------------------------------
  Single source of truth for color, type, spacing, and shape.
  Pages reference these custom properties — never hardcode a hex value
  or a px spacing number directly in a component stylesheet.

  Color values below were sampled directly (pixel-picked, not eyeballed)
  from the surviving Impact Kilimanjaro screenshot Sean provided. They are
  a faithful starting point, not final brand guidelines — if Sean has an
  official brand doc with exact hex values, swap them in here and every
  page updates automatically.

  Typography is an assumption (Poppins / Inter) matching the visual weight
  of the source screenshot. Swap here if Sean has the actual brand fonts.
*/

:root {
  /* ---- Color: core palette ---- */
  --color-forest-900: #023020;   /* primary dark green — section backgrounds */
  --color-forest-800: #0a4530;   /* lighter green for hover/alt states */
  --color-forest-700: #10553d;
  --color-forest-950-fade: #01201530; /* forest-900, darkened + transparent, for hero gradient depth */

  --color-orange-500: #fd6600;   /* primary accent — all CTAs */
  --color-orange-600: #e35c00;   /* hover/active state for orange CTAs */

  --color-charcoal-900: #1a1a1a; /* footer / near-black band */

  --color-cream-50: #faf9f6;     /* warm off-white section background */
  --color-white: #ffffff;

  --color-text-primary: #14160d;   /* body copy on light backgrounds */
  --color-text-on-dark: #ffffff;   /* body copy on green/charcoal backgrounds */
  --color-text-muted: #5b6058;     /* secondary/supporting copy */

  --color-border: #e4e2dc;         /* hairlines, card borders on light bg */
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* ---- Typography ---- */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-hero: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.4rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-stat: clamp(2.5rem, 3vw + 1.5rem, 3.5rem);

  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4.5rem;   /* 72px */
  --space-7: 6rem;     /* 96px */

  /* ---- Shape / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 24px rgba(2, 48, 32, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(2, 48, 32, 0.14);

  /* ---- Layout ---- */
  --max-width: 1200px;
  --header-height: 84px;

  /* ---- Photography slots ----
     No real photography exists yet. These stay "none" (rendering the
     dashed placeholder look in styles.css) until Sean drops real files
     into assets/images/ and uncomments the matching line in styles.css. */
  --hero-bg-image: none;
}