/* =============================================================================
   New Jersey HVAC Service Experts — design tokens
   -----------------------------------------------------------------------------
   Ported from the Automec service-and-repair template: its palette, its
   typeface, and — more importantly — its structural rhythm. The point of using
   a template is the layout, not the colors, so the sections below exist to
   support blocks the template actually has (utility bar, bleeding logo block,
   overlaid photographic hero with a floating stat card, marquee strip, orange
   CTA band) rather than a generic page dressed in orange.

   Where the template shows blocks we cannot fill honestly — a team roster,
   client testimonials, "20K satisfied clients" counters, a project portfolio —
   those are replaced rather than faked. A referral service has no technicians
   and no completed jobs of its own, and inventing them would contradict the
   disclaimer on every page.
   ========================================================================== */

@font-face {
  font-family: 'Inter Tight';
  src: url('/fonts/inter-tight-var.woff2') format('woff2-variations');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Palette, taken from the template ---------------------------------- */
  /* The template's brand orange, kept for fills and large display type where
     it only has to clear 3:1. It measures 4.19:1 on white, which fails the
     4.5:1 needed for body-size text — so small text and button fills use the
     darker variants below rather than weakening the brand colour everywhere.
     Ratios in the comments are measured, not estimated. */
  --primary:      #EB3300;   /* fills, large type            */
  --primary-text: #D42E00;   /* small text on white  5.01:1  */
  --primary-fill: #D42E00;   /* white text on it     5.01:1  */
  --primary-dark: #B82800;   /* hover                6.28:1  */
  --primary-lite: #F5490F;   /* on near-black        4.99:1  */
  --primary-soft: #FDEDE8;
  --black:        #171717;
  --black-50:     #2C3237;
  --black-200:    #31373F;
  --ink:          #171717;
  --ink-2:        #595959;
  --ink-3:        #6B7484;   /* on white 4.71:1 */
  --white:        #FFFFFF;
  --gray-50:      #EEF5F8;
  --gray-100:     #F4F4F4;
  --gray-200:     #E1E1E1;
  --gray-300:     #DFE2E9;
  --line:         #E1E1E1;

  --paper:        #FFFFFF;
  --paper-2:      #F4F4F4;
  --surface:      #FFFFFF;

  /* Footer is the template's near-black. */
  --foot-bg:      #171717;
  --foot-ink:     #BFC5CB;
  --foot-ink-2:   #778196;
  --foot-hi:      #FFFFFF;
  --foot-line:    #2C3237;
  --on-accent:    #FFFFFF;

  --warn:         #8A5009;   /* on warn-soft 5.6:1 */
  --warn-soft:    #FBF0DF;

  /* ---- Type -------------------------------------------------------------
     Yantramanav throughout, as the template does. Headings run at 900 and
     tight, which is where the design gets its weight. */
  --font:   'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs--1:  0.8125rem;
  --fs-0:   0.875rem;
  --fs-1:   0.9375rem;
  --fs-2:   1.0625rem;
  --fs-3:   1.25rem;
  --fs-4:   1.5rem;
  --fs-5:   1.875rem;
  --fs-6:   2.375rem;
  --fs-7:   clamp(2rem, 4.2vw, 3.125rem);

  --lh-tight: 1.08;
  --lh-head:  1.2;
  --lh-body:  1.6;

  /* Compressed against the template's own scale. The site is a working tool
     for someone whose heating has failed, not a brochure — tight beats airy. */
  --s-1: 0.25rem;  --s-2: 0.375rem; --s-3: 0.5rem;   --s-4: 0.75rem;
  --s-5: 1rem;     --s-6: 1.375rem; --s-7: 1.75rem;  --s-8: 2.25rem;
  --s-9: 2.75rem;  --s-10: 3.5rem;  --s-11: 4.25rem; --s-12: 5rem;

  /* The template is squared throughout — no rounded corners anywhere. */
  --r-1: 0;
  --r-2: 0;
  --r-3: 0;

  --shadow-1: 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-2: 0 4px 16px rgba(23, 23, 23, 0.08);
  --shadow-3: 0 18px 46px rgba(23, 23, 23, 0.16);

  --wrap:        1200px;
  --wrap-narrow: 780px;
}