/* =====================================================================
   BRAND TOKENS — EKG LOCAL, "High Country HVAC" skin.
   Swap this file per client and the whole site re-skins. Everything in
   style.css references these variables; don't hard-code colors there.
   Fluid type scale follows the EKG Typography Standard (clamp-based).
   ===================================================================== */
:root {
  /* ---- Palette (Blue Ridge blue + warm "heat" orange) ---- */
  --color-bg:         #f5f8fa;   /* page background */
  --color-surface:    #ffffff;   /* cards, header */
  --color-text:       #1b2a33;   /* body ink */
  --color-muted:      #5a6b75;   /* secondary text */
  --color-primary:    #14425a;   /* deep Blue Ridge blue — headings, brand */
  --color-primary-dk: #0e2f41;
  --color-accent:     #e2703a;   /* warm heat orange — CTAs, phone */
  --color-accent-dk:  #c65b28;
  --color-accent-ink: #ffffff;   /* text on accent */
  --color-border:     #dce5ea;   /* hairlines */

  /* Mountain ridges: light (far) -> dark (near) */
  --ridge-4: #b8d2df;
  --ridge-3: #86b0c4;
  --ridge-2: #4d86a1;
  --ridge-1: #1d5c78;
  --sky-top: #eaf4f8;
  --sky-bot: #d7e9f1;

  /* ---- Fonts (self-hosted or system only — no CDN) ---- */
  --font-display: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Fluid type scale (min .. max) ---- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.45rem + 1.45vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.60rem + 2.40vw, 3.75rem);

  /* ---- Spacing + layout ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --wrap: 74rem;
  --wrap-narrow: 46rem;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20, 66, 90, 0.08), 0 10px 28px rgba(20, 66, 90, 0.08);
}