/* ===== Design Tokens =====
 * Palette: olive/sage navigation + warm-brown buttons + mist-grey content background.
 */
:root {
  /* Brand — warm brown buttons */
  --brand-primary:    #7A4B37;     /* normal CTA */
  --brand-primary-d:  #5C3829;     /* hover */
  --brand-primary-l:  #F4ECE6;     /* light tint background */

  /* Inquiry — emphasized darker brown (used on "INQUIRY NOW", "GET A FREE QUOTE", "Send Inquiry") */
  --inquiry:          #8B4A32;
  --inquiry-d:        #6E3825;
  --inquiry-l:        #F2E3DA;

  /* Accent — for sales banner / decorative */
  --accent:           #B36B47;
  --accent-d:         #8A4F35;
  --accent-soft:      #C9986F;     /* sales banner background */

  /* Navigation surfaces (olive / sage) */
  --topbar-bg:        #4F5D4A;     /* deeper olive top bar */
  --topbar-text:      rgba(255,255,255,.85);
  --nav-bg:           #5E6B55;     /* main navigation green */
  --nav-text:         #FFFFFF;
  --nav-text-muted:   rgba(255,255,255,.78);

  /* Dark surfaces */
  --hero-bg:          #2D2620;     /* warm dark brown hero */
  --hero-overlay:     rgba(45,38,32,.78);
  --footer-bg:        #3E3A37;     /* dark brown-grey footer */
  --footer-text:      rgba(255,255,255,.72);

  /* Neutrals */
  --text-dark:        #333333;     /* heading colour */
  --text-heading-alt: #3E3A37;     /* warm dark grey alternate */
  --text-body:        #4B5563;
  --text-muted:       #6B7280;
  --text-light:       #9CA3AF;

  /* Page surfaces */
  --bg-page:          #FFFFFF;     /* module background */
  --bg-soft:          #F2EEE9;     /* main page background (mist grey) */
  --bg-section:       #F2EEE9;
  --bg-section-alt:   #EAE5DD;     /* slightly darker for variation */

  /* Borders */
  --border:           #E5E5E5;     /* light divider */
  --border-strong:    #D7D3CC;

  /* Feedback */
  --success:          #166E3E;
  --warning:          #C77E0F;
  --danger:           #B91C1C;

  /* Shadows */
  --shadow-sm:        0 1px 2px rgba(45, 38, 32, .07);
  --shadow-md:        0 6px 16px rgba(45, 38, 32, .10);
  --shadow-lg:        0 20px 40px rgba(45, 38, 32, .14);
  --shadow-ring:      0 0 0 4px rgba(139, 74, 50, .18);

  /* Radii */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        16px;
  --radius-pill:      999px;

  /* Spacing */
  --space-1:          .25rem;
  --space-2:          .5rem;
  --space-3:          .75rem;
  --space-4:          1rem;
  --space-5:          1.25rem;
  --space-6:          1.5rem;
  --space-8:          2rem;
  --space-10:         2.5rem;
  --space-12:         3rem;
  --space-16:         4rem;
  --space-20:         5rem;
  --space-24:         6rem;

  /* Typography */
  --font-heading:     "Fredoka", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:        "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs:            .75rem;
  --fs-sm:            .875rem;
  --fs-base:          1rem;
  --fs-lg:            1.125rem;
  --fs-xl:            1.25rem;
  --fs-2xl:           clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --fs-3xl:           clamp(1.875rem, 1.55rem + 1vw, 2.5rem);
  --fs-4xl:           clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  --fs-5xl:           clamp(2.75rem, 2rem + 3vw, 4rem);

  --lh-tight:         1.15;
  --lh-snug:          1.35;
  --lh-normal:        1.65;
  --lh-loose:         1.8;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* Layout */
  --container-max:    1240px;
  --container-pad:    clamp(1rem, 2vw + .5rem, 2rem);
  --section-pad-y:    clamp(3rem, 5vw, 5.5rem);
  --header-h:         88px;
  --topbar-h:         42px;

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

/* Default page background — mist grey for content pages */
body { background: var(--bg-soft); }