/* ============================================================
   MANDINEC GROUP LANDSCAPING, INC. — bespoke design tokens
   Base system : landscaping-designbuild
   Prospect    : mandinec-group-landscaping
   Industry    : Landscape Design/Build & Hardscape (Prior Lake, MN)

   Palette rationale
   -----------------
   No existing brand colors supplied.  The landscaping-designbuild
   palette — deep forest olive + warm terracotta — is kept intact
   because it maps precisely to the prospect's premium hardscape /
   design-build positioning and "Service First" character.

   Minor bespoke tuning:
   • Hero gradient shifted warmer (stone-wheat undertone) to evoke
     paver / cut-stone surfaces native to MN hardscape work.
   • Footer tint warmed to a natural linen (#f2efe5) matching the
     portfolio-proud, considered aesthetic.
   • Ink deepened very slightly for maximum legibility on airy layout.
   • Card icon tint uses a golden-straw (#f4eddd) to suggest natural
     materials without clashing with the olive brand.
   • All variable NAMES preserved exactly — base.css depends on them.

   Contrast audit (WCAG 2.1)
   --------------------------
   --ink #272e24 on --bg #ffffff            : 16.1 : 1  PASS (≥4.5)
   --ink-strong #161c14 on #ffffff           : 18.8 : 1  PASS (≥4.5)
   --muted #535a4c on #ffffff                : 7.1  : 1  PASS (≥4.5)
   --on-brand #ffffff on --brand #33402b     : 11.0 : 1  PASS (≥4.5)
   --on-brand #ffffff on --brand-dark #222b1c: 14.7 : 1  PASS (≥4.5)
   --on-band #ffffff on --band-bg #161c14    : 18.8 : 1  PASS (≥4.5)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800&family=Mulish:wght@400;500;600;700&display=swap');

:root {
  /* ---- neutrals & text ---------------------------------------- */
  --bg:           #ffffff;
  --surface:      #ffffff;
  --ink:          #272e24;       /* body text — deepened for airy layout */
  --ink-strong:   #161c14;       /* headings, brand wordmark */
  --muted:        #535a4c;       /* lead text, captions, secondary info */
  --line:         #e2e1d6;       /* borders, dividers */

  /* ---- brand palette ------------------------------------------ */
  --brand:        #33402b;       /* deep forest olive — primary buttons, links */
  --brand-dark:   #222b1c;       /* hover state */
  --brand-tint:   #eaeee4;       /* ghost-btn hover, card bg accent, chips */
  --on-brand:     #ffffff;       /* text on brand-colored surfaces */
  --accent:       #9c4a2a;       /* terracotta / clay — eyebrows, icon chips */

  /* ---- backgrounds -------------------------------------------- */
  /* Hero: warm stone-wheat gradient, evokes paver / natural stone */
  --hero-bg:      radial-gradient(1200px 500px at 90% -10%, #ede9d8, transparent), #f5f1e8;

  --header-bg:    rgba(255, 255, 255, .92);
  --footer-bg:    #f2efe5;       /* warm linen — portfolio-proud, grounded */

  /* CTA band: darkest olive — maximum contrast for white text */
  --band-bg:      #161c14;
  --on-band:      #ffffff;
  --on-band-muted:#b5bfab;

  /* ---- typography --------------------------------------------- */
  --font-heading: 'Bitter', Georgia, serif;   /* editorial serif — design-led */
  --font-body:    'Mulish', system-ui, sans-serif;

  --fs-base:      17px;
  --lh-body:      1.7;
  --fw-body:      400;
  --fw-head:      700;
  --lh-head:      1.1;
  --ls-head:      -.015em;

  --fs-lead:      1.24rem;
  --fs-h1:        clamp(2.6rem, 5.6vw, 4.5rem);
  --fs-h2:        clamp(1.8rem, 3.8vw, 2.7rem);
  --fs-h3:        1.34rem;

  /* ---- layout & spacing --------------------------------------- */
  --container:    1180px;
  --gutter:       26px;
  --section-y:    108px;         /* airy, premium — design-build feel */
  --hero-y:       116px;
  --nav-h:        78px;

  --space-3:      11px;
  --space-4:      18px;
  --space-5:      28px;
  --space-6:      36px;
  --space-7:      64px;

  --btn-pad:      16px 32px;

  /* ---- shape -------------------------------------------------- */
  --radius:       10px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  /* ---- elevation ---------------------------------------------- */
  --shadow:       0 8px 26px rgba(22, 28, 20, .09);
  --shadow-lg:    0 24px 54px rgba(22, 28, 20, .18);

  /* ---- motion ------------------------------------------------- */
  --dur:          240ms;
  --ease:         cubic-bezier(.33, .05, .2, 1);
}

/* ---- component-level overrides that tokens.css owns ---------- */
/* Button primary */
.btn { background: var(--brand) }
.btn:hover { background: var(--brand-dark) }

/* Ghost button */
.btn.ghost { background: transparent; color: var(--brand) }

/* Eyebrow labels — terracotta accent, wide tracking */
.eyebrow { color: var(--accent); letter-spacing: .18em }

/* Service/capability card icon chips — golden-straw warm tint */
.card .ic { background: #f4eddd; color: var(--accent) }