/* IT Plumbing and Heating: itrenewables.com
   Air source heat pump landing page, colour tokens.
   Derived from the client logo. Flame and ink are locked brand values. */

:root {
  /* Locked. Sampled directly from IT logo.png. Do not alter. */
  --it-flame:     #F68E3F;
  --it-ink:       #333333;

  /* Cold set: the outside air the pump draws from. */
  --it-cold:      #16323C;  /* base, headlines, dark sections */
  --it-cold-mid:  #2C4E59;  /* borders and dividers on dark */
  --it-mist:      #DDE8E8;  /* panels, form fields, quiet blocks */

  /* Warm set: the house it heats. */
  --it-limewash:  #FBF7F1;  /* page background */
  --it-ember:     #A84A0A;  /* accessible orange for links and small text */

  /* Semantic roles */
  --it-bg:            var(--it-limewash);
  --it-text:          var(--it-ink);
  --it-heading:       var(--it-cold);
  --it-cta-bg:        var(--it-flame);
  --it-cta-text:      var(--it-cold);
  --it-cta-bg-hover:  #E87F2C;
  --it-link:          var(--it-ember);
  --it-panel:         var(--it-mist);
  --it-focus:         var(--it-ember);
}

/* Contrast, checked to WCAG 2.1
   limewash on cold      12.6:1   AAA
   ink on limewash       11.8:1   AAA
   flame on cold          5.7:1   AA
   cold on flame          5.7:1   AA   (this is the CTA pairing)
   ember on limewash      5.4:1   AA
   cold on mist          10.8:1   AAA
   flame on limewash      2.2:1   FAILS. Fills, rules and icons only, never text.

   Usage rules
   1. Flame is the only accent. One flame element per screenful. If two CTAs
      compete, the second is an outline in cold, not a second orange block.
   2. Never set flame as text on limewash. Use ember instead. This is the single
      easiest mistake to make and it fails accessibility every time.
   3. Grant figures (£9,000, £7,500) are set in ember on light, flame on cold.
      Money is the only thing besides the CTA allowed to wear orange.
   4. The MCS umbrella explainer sits on mist, not on flame or cold. It reads as
      plain factual disclosure, not as a badge or a boast.
   5. The logo is supplied on transparency. Place it on limewash or on white,
      never on mist or cold without a knockout version.
*/

/* ---------------------------------------------------------------
   TYPOGRAPHY
   One family: Archivo (Omnibus-Type, SIL Open Font License 1.1).
   Variable, with a width axis. Verified to carry the Welsh
   circumflexes (U+0174-0177) and tabular figures (tnum).
   --------------------------------------------------------------- */

/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..700&display=swap" rel="stylesheet"> */

:root {
  --it-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Width axis carries the personality. Weight alone reads flat. */
  --it-wdth-display: 118;
  --it-wdth-figure:  122;
  --it-wdth-body:    100;

  --it-size-hero:     clamp(2rem, 5.2vw, 2.75rem);   /* 32 to 44px */
  --it-size-figure:   clamp(2.75rem, 8vw, 3.75rem);  /* 44 to 60px */
  --it-size-section:  clamp(1.4rem, 3vw, 1.625rem);  /* 22 to 26px */
  --it-size-sub:      1.25rem;                        /* 20px */
  --it-size-body:     1.125rem;                       /* 18px, the floor */
  --it-size-note:     1.0625rem;                      /* 17px */
  --it-size-label:    0.8125rem;                      /* 13px */
}

body { font-family: var(--it-font); font-size: var(--it-size-body); line-height: 1.65; color: var(--it-text); }

h1 {
  font-size: var(--it-size-hero);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--it-wdth-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--it-heading);
}

h2 {
  font-size: var(--it-size-section);
  font-weight: 600;
  font-variation-settings: 'wdth' 115;
  line-height: 1.2;
  color: var(--it-heading);
}

.it-figure {
  font-size: var(--it-size-figure);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--it-wdth-figure);
  font-feature-settings: 'tnum';
  line-height: 1;
  letter-spacing: -0.02em;
}

.it-eyebrow {
  font-size: var(--it-size-label);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--it-ember);
}

p { max-width: 34rem; }

/* Rules
   1. One family only. The logo wordmark is the ONLY serif that appears
      anywhere on the site. Do not add a second serif for headlines.
   2. 18px is the floor for body copy. This audience is 45 to 70 and
      mostly on a phone. Never drop to 15 or 16 to fit more in.
   3. Personality comes from the WIDTH axis, not from a second typeface.
      Headlines widen, body stays at normal width.
   4. Any money figure (£9,000, £7,500, quoted prices) uses .it-figure or
      at minimum font-feature-settings: 'tnum' so digits align.
   5. The MCS umbrella disclosure is set at 17px, one step below body and
      no smaller. Shrinking it into small print is what makes a reader
      suspicious, which is the exact opposite of its job.
   6. Sentence case throughout. No ALL CAPS headlines: they slow reading
      and the logo already carries the caps.
*/