:root {
  /* ============================================================
     BREEZE HEAT & AIR — DESIGN TOKENS
     Warm/cool duality: cooling blue + heating orange, deliberately paired.
     Colors sampled from the logo (orange+blue flame) + their site CSS.
     ============================================================ */

  /* --- Brand: cooling blue (primary) --- */
  --blue: #00aeef;
  --blue-sky: #3cb4fc;
  --blue-deep: #0b7fb3;
  --blue-ink: #06344a;      /* deep navy-blue for dark sections */

  /* --- Brand: heating orange (accent) --- */
  --orange: #fc8424;
  --gold: #fccc54;
  --orange-deep: #e06c12;

  /* --- Neutrals --- */
  --ink: #111417;           /* body text + dark surfaces */
  --ink-soft: #33383d;
  --muted: #5c646c;         /* secondary text */
  --paper: #ffffff;
  --wash: #f5f8fb;          /* soft cool wash background */
  --line: #e4e9ef;          /* borders */
  --line-strong: #cfd7e0;
  --steel: #9aa6b2;         /* muted-on-dark */
  --success: #1f9d55;
  --danger: #c0362c;

  /* --- Gradients --- */
  --grad-hero: linear-gradient(150deg, #06344a 0%, #0b7fb3 52%, #00aeef 100%);
  --grad-warm: linear-gradient(120deg, var(--orange) 0%, var(--gold) 100%);
  --grad-ink: linear-gradient(160deg, #0d1518 0%, #06344a 100%);

  /* --- Type: Barlow Condensed (display) + Inter (body). Logo-genre match. --- */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Type scale: fluid clamp() in PX (ledger C1) --- */
  --fs-xs:   clamp(12px, 0.25vw + 11px, 13px);
  --fs-sm:   clamp(13px, 0.35vw + 12px, 15px);
  --fs-base: clamp(16px, 0.35vw + 14px, 17px);
  --fs-md:   clamp(18px, 0.6vw + 15px, 21px);
  --fs-lg:   clamp(21px, 1.1vw + 16px, 27px);
  --fs-xl:   clamp(25px, 1.9vw + 17px, 34px);
  --fs-2xl:  clamp(30px, 3.2vw + 17px, 48px);
  --fs-3xl:  clamp(38px, 4.6vw + 20px, 66px);
  --fs-4xl:  clamp(46px, 5.6vw + 22px, 78px);

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-base: 1.62;

  --track-display: 0.005em;
  --track-eyebrow: 0.15em;

  /* --- Spacing --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: clamp(64px, 9vw, 112px);
  --s-10: clamp(80px, 11vw, 140px);

  --container: 1200px;
  --container-narrow: 820px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 800px;

  --shadow-sm: 0 2px 8px rgba(6, 52, 74, 0.08), 0 1px 2px rgba(6, 52, 74, 0.05);
  --shadow-md: 0 14px 34px rgba(6, 52, 74, 0.12), 0 4px 12px rgba(6, 52, 74, 0.08);
  --shadow-lg: 0 30px 64px rgba(6, 52, 74, 0.20), 0 10px 26px rgba(6, 52, 74, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;

  --nav-h: 76px;
  --topbar-h: 38px;
}