/* ==========================================================================
   GROWFLO — Design Tokens
   Brand-locked from the delivered brochure. Single source of truth for the
   whole website UI. Edit values here; every page + component inherits them.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand: Green scale (logo green #64A52B / light #75B253) ---------- */
  --green-50:  #F3F8EB;
  --green-100: #E2F0CC;
  --green-200: #C9E4A2;
  --green-300: #A9D36E;
  --green-400: #88C140;
  --green-500: #64A52B;   /* primary action / logo green */
  --green-600: #538C22;
  --green-700: #42701C;
  --green-800: #335416;

  /* ---- Brand: Forest scale (deep #15392B) ------------------------------ */
  --forest-900: #0C2318;
  --forest-800: #102E20;
  --forest-700: #15392B;   /* brand forest — dark sections */
  --forest-600: #1C4A38;
  --forest-500: #265E49;
  --forest-400: #3A7660;

  /* ---- Neutrals -------------------------------------------------------- */
  --white:    #FFFFFF;
  --sand:     #FAFAF4;     /* near-white warm */
  --cream:    #F4F4EC;     /* brand cream — alt sections */
  --gray-100: #EDEFEA;
  --gray-200: #DEE2D9;
  --gray-300: #C3C9BD;
  --gray-400: #9AA395;
  --gray-500: #6E776A;
  --gray-600: #4A5247;
  --charcoal: #2C2F33;     /* brand charcoal — body text */
  --ink:      #181B17;

  /* ---- Semantic roles -------------------------------------------------- */
  --bg:            var(--white);
  --bg-alt:        var(--cream);
  --bg-dark:       var(--forest-700);
  --surface:       var(--white);
  --text:          var(--charcoal);
  --text-strong:   var(--ink);
  --text-muted:    var(--gray-500);
  --text-invert:   var(--white);
  --text-invert-muted: #B9C8BD;
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-soft:   var(--green-50);
  --ring:          rgba(100, 165, 43, .35);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: 'Plus Jakarta Sans', 'Figtree', 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Figtree', 'Avenir Next', sans-serif;

  --text-display: 3.75rem;   /* 60 */
  --text-h1:      3rem;      /* 48 */
  --text-h2:      2.25rem;   /* 36 */
  --text-h3:      1.5rem;    /* 24 */
  --text-h4:      1.25rem;   /* 20 */
  --text-lg:      1.125rem;  /* 18 */
  --text-base:    1rem;      /* 16 */
  --text-sm:      0.875rem;  /* 14 */
  --text-xs:      0.75rem;   /* 12 */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* ---- Elevation (soft, green-tinted) ---------------------------------- */
  --sh-sm: 0 1px 2px rgba(21, 57, 43, .06), 0 1px 3px rgba(21, 57, 43, .08);
  --sh-md: 0 4px 10px rgba(21, 57, 43, .06), 0 2px 4px rgba(21, 57, 43, .06);
  --sh-lg: 0 12px 28px rgba(21, 57, 43, .10), 0 4px 10px rgba(21, 57, 43, .06);
  --sh-xl: 0 28px 60px rgba(21, 57, 43, .16), 0 10px 24px rgba(21, 57, 43, .08);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
  --nav-height: 72px;
  --hero-top-space: clamp(3.75rem, 6vw, 6.75rem);
  --hero-bottom-space: clamp(5rem, 7vw, 7.5rem);
  --mega-w: min(920px, calc(100vw - 48px));

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur:  .2s;
}