/* ==========================================================================
   Encore design tokens — the ONLY file allowed to contain hex colors.
   Source: Encore 2025 brand guide. Everything else uses var(--token).
   ========================================================================== */
:root {
  /* ---- Brand greens ---------------------------------------------------- */
  --brand-grass-green: #326932;   /* dark grass green — primary */
  --brand-summer-green: #9CBE69;  /* bright summer green */
  --brand-deep-green: #074902;    /* "Green #1" */
  --brand-olive: #778008;
  --brand-lime: #C7DD78;          /* light lime */

  /* ---- Brand blues ----------------------------------------------------- */
  --brand-navy: #003264;          /* dark water blue */
  --brand-sky: #32B5FF;           /* light sky blue (guide RGB 50,181,255) */

  /* ---- Greys ----------------------------------------------------------- */
  --grey-1: #C3C3C2;
  --grey-2: #999898;              /* decorative only: fails AA as text */
  --grey-3: #6F6F6E;              /* muted text (AA on light surfaces) */
  --grey-4: #3C3C3B;              /* body text */
  --white: #FFFFFF;

  /* ---- Division accents (SMALL accents only: bars, icons, labels) ------ */
  --division-maintenance: #D1C04E;
  --division-arbor: #9CBE69;
  --division-arbor-light: #C7DD78;
  --division-enhancements: #E77C73;
  --division-irrigation: #80B1C6;
  --division-plant-health: #8775C2;

  /* ---- Semantic roles -------------------------------------------------- */
  --color-primary: var(--brand-grass-green);
  --color-primary-dark: var(--brand-deep-green);
  --color-accent: var(--brand-summer-green);
  --color-heading: var(--brand-navy);
  --color-text: var(--grey-4);
  --color-text-muted: var(--grey-3);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-muted: rgba(255, 255, 255, .78);
  --color-border: rgba(50, 105, 50, .14);
  --color-focus: var(--brand-sky);
  --focus-ring: rgba(50, 181, 255, .45);

  /* Surfaces (green-tinted, derived from the brand greens) */
  --surface-page: #F6F9F1;        /* page background — green-tinted off-white */
  --surface-sage: #E8F0DC;        /* alternate light sections — pale sage of #9CBE69 */
  --surface-card: #FFFFFF;
  --surface-green-tint: rgba(50, 105, 50, .10);  /* eyebrow pill, chips */
  --surface-white-tint: rgba(255, 255, 255, .14);
  --surface-glass: rgba(255, 255, 255, .15);
  --surface-glass-border: rgba(255, 255, 255, .28);
  --surface-navy-glass: rgba(0, 50, 100, .55);   /* top bar over a hero */
  --divider-on-dark: rgba(255, 255, 255, .1);

  /* ---- Gradients -------------------------------------------------------
     --gradient-green / --gradient-blue are the brand-guide gradients (top -> bottom).
     White BODY text fails AA on their light tops (#9CBE69 = 2.1:1, #32B5FF = 2.3:1),
     so text-bearing bands use the *-band variants, which keep the look but start
     darker (both >= 4.5:1 with white at every stop). Use the pure brand gradients
     behind logos, large display type, or under a dark overlay. */
  --gradient-green: linear-gradient(180deg, var(--brand-summer-green) 0%, var(--brand-grass-green) 100%);
  --gradient-blue: linear-gradient(180deg, var(--brand-sky) 0%, var(--brand-navy) 100%);
  --gradient-green-band: linear-gradient(180deg, #487F3B 0%, var(--brand-grass-green) 55%, #22561F 100%);
  --gradient-blue-band:
    radial-gradient(ellipse 60% 120% at 88% -10%, rgba(50, 181, 255, .45) 0%, rgba(50, 181, 255, 0) 60%),
    linear-gradient(180deg, #1A75B3 0%, var(--brand-navy) 100%);

  /* Photo overlays (darken photography under white text).
     Ink = near-black navy (0, 16, 32). Blended over a pure-white photo, ink at >= .55 keeps
     white text >= 4.5:1, so every text-bearing area of an overlay stays at or above that:
       --overlay-hero        home hero: left->right .76 -> .15 (copy sits in the left 60%) plus
                             a top fade (header) and a bottom fade (glass card + dots).
       --overlay-hero-narrow same hero below 768px, where copy spans the full width.
       --overlay-page-hero   interior banners: bottom-up fade (h1 + lead sit at the bottom) on top
                             of a left->right gradient. */
  --overlay-ink: 0, 16, 32;
  --overlay-photo: linear-gradient(180deg, rgba(0, 20, 10, .55) 0%, rgba(0, 20, 10, .35) 45%, rgba(0, 20, 10, .70) 100%);
  --overlay-hero:
    linear-gradient(180deg, rgba(var(--overlay-ink), .45) 0%, rgba(var(--overlay-ink), 0) 22%),
    linear-gradient(0deg, rgba(var(--overlay-ink), .6) 0%, rgba(var(--overlay-ink), 0) 32%),
    linear-gradient(90deg, rgba(var(--overlay-ink), .76) 0%, rgba(var(--overlay-ink), .66) 40%, rgba(var(--overlay-ink), .55) 62%, rgba(var(--overlay-ink), .28) 80%, rgba(var(--overlay-ink), .15) 100%);
  --overlay-hero-narrow:
    linear-gradient(180deg, rgba(var(--overlay-ink), .5) 0%, rgba(var(--overlay-ink), .6) 40%, rgba(var(--overlay-ink), .68) 100%);
  --overlay-page-hero:
    linear-gradient(0deg, rgba(var(--overlay-ink), .55) 0%, rgba(var(--overlay-ink), 0) 70%),
    linear-gradient(90deg, rgba(var(--overlay-ink), .62) 0%, rgba(var(--overlay-ink), .45) 50%, rgba(var(--overlay-ink), .25) 100%);
  --overlay-page-hero-narrow:
    linear-gradient(180deg, rgba(var(--overlay-ink), .5) 0%, rgba(var(--overlay-ink), .62) 50%, rgba(var(--overlay-ink), .78) 100%);
  --overlay-green: rgba(7, 73, 2, .72);   /* photo-card hover */
  --overlay-card-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 20, 10, .72) 100%);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.0625rem;           /* 17px */
  --lh-body: 1.7;
  --fs-small: .875rem;
  --fs-lead: clamp(1.125rem, 1.4vw, 1.3125rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.25rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-eyebrow: .8125rem;         /* 13px */
  --lh-heading: 1.08;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;             /* synthesized from 500/700 if no 600 file */
  --fw-bold: 700;
  --ls-eyebrow: .06em;
  --ls-button: .08em;

  /* ---- Shape, spacing, depth ------------------------------------------ */
  --radius: 8px;                  /* cards, images, inputs */
  --radius-lg: 16px;
  --radius-pill: 999px;           /* buttons */
  --radius-eyebrow: 30px;
  --section-pad: clamp(72px, 10vw, 140px);
  --section-pad-sm: clamp(48px, 6vw, 80px);
  --container-max: 1320px;
  --gutter: clamp(16px, 3vw, 32px);
  --shadow-soft: 0 20px 30px rgba(0, 0, 0, .08);
  --shadow-glow: 0 10px 24px rgba(50, 105, 50, .28);

  /* ---- Header ---------------------------------------------------------- */
  --topbar-height: 38px;
  --header-height: 92px;
  --header-height-compact: 68px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;
  --hero-fade: 1.6s;
  --marquee-duration: 50s;
}