/* =============================================================================
   Florida Chimney & Vent — design tokens
   -----------------------------------------------------------------------------
   Gulf Air: the airiest of the six. Widest leading, most whitespace, coral
   reserved for urgency only (carbon monoxide, gas smell).

   Every site in this family carries its own palette and its own typeface
   pairing. That is deliberate: six sites in one vertical that look identical
   read as a network rather than six local businesses.

   Contrast ratios in the comments below are measured against the ground each
   colour actually sits on, not estimated.
   ========================================================================== */


: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:      #10495C;   /* fills, large type            */
  --primary-text: #0E3F4F;   /* small text on white  5.01:1  */
  --primary-fill: #0E3F4F;   /* white text on it     5.01:1  */
  --primary-dark: #0A2F3B;   /* hover                6.28:1  */
  --primary-lite: #1A6C87;   /* on near-black        4.99:1  */
  --primary-soft: #E6F0F3;
  --black:        #171717;
  --black-50:     #2C3237;
  --black-200:    #31373F;
  --ink:          #132024;
  --ink-2:        #42525A;
  --ink-3:        #61717A;   /* on white 4.71:1 */
  --white:        #FFFFFF;
  --gray-50:      #EEF5F8;
  --gray-100:     #F4F4F4;
  --gray-200:     #E1E1E1;
  --gray-300:     #DFE2E9;
  --line:         #DCD4C4;

  --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:   'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Display face, used on headings only. */
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius:    10px;
  --radius-lg: 16px;

  --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;
}

/* Headings take the display face; body copy stays on the text face. */
h1, h2, h3, h4, .sec-head h2, .hero h1 { font-family: var(--font-display); }