/* =====================================================================
   PeakLine Heating & Air Aurora — design tokens
   Concept: "Front Range, two seasons." Ember = heating · Alpine = cooling
   Teal = both/year-round · Sun-gold = call buttons ONLY.
   ===================================================================== */
:root {
  /* ---- color ---- */
  --ink: #0F1B2D;            /* body text, dark sections */
  --ridge: #34475F;          /* secondary text, ridgeline strokes */
  --snow: #F6F8FB;           /* page background */
  --line: #D7DEE7;           /* borders, dividers */

  --ember: #D8481F;          /* heating — fills, icons, large graphics */
  --ember-deep: #A83212;     /* heating — text on snow (6.3:1) */
  --alpine: #1F6FB5;         /* cooling — fills + text on snow (4.9:1) */
  --alpine-deep: #155A91;    /* cooling — darker text variant (6.8:1) */
  --teal: #12877F;           /* both/year-round — fills, icons */
  --teal-deep: #0D6B64;      /* both — text on snow (6.0:1) */
  --sun: #F5B82E;            /* call + booking buttons ONLY (ink text on it: 9.7:1) */
  --sun-deep: #D99A12;       /* sun hover/focus */

  /* ---- type ---- */
  --font-d: 'Archivo', 'Arial Narrow', sans-serif;          /* display */
  --font-b: 'IBM Plex Sans', -apple-system, sans-serif;    /* body */

  --h1: clamp(2.25rem, 6vw, 4.25rem);
  --h2: clamp(1.75rem, 4vw, 2.75rem);
  --h3-min: 1.25rem;
  --h3-max: 1.5rem;
  --body: 1.0625rem;
  --small: 0.875rem;
  --lh-body: 1.6;
  --measure: 68ch;           /* paragraph line length */

  /* ---- spacing (4px base) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;
  --sec-y-m: 64px;
  --sec-y-d: 96px;

  /* ---- shape ---- */
  --r-sm: 4px;               /* buttons, inputs, tags */
  --r-lg: 12px;              /* image frames, panels */

  /* ---- elevation (one subtle style only) ---- */
  --shadow-bar: 0 2px 12px rgba(15, 27, 45, 0.14);

  /* ---- layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 760px;
}

/* Service-type color logic: ember = heating, alpine = cooling, teal = both.
   Colors carry meaning — never use them as pure decoration. Tags always
   pair color with a text label + icon shape (never color alone). */
.tag-heat  { --tag-c: var(--ember);      --tag-ct: var(--ember-deep); }
.tag-cool  { --tag-c: var(--alpine);     --tag-ct: var(--alpine-deep); }
.tag-both  { --tag-c: var(--teal);       --tag-ct: var(--teal-deep); }