/* =============================================================================
   California Chimney Care — design tokens
   -----------------------------------------------------------------------------
   Ember & Fault: the only dark-first site of the six. Charcoal ground, ash text,
   one ember accent used once per screen. Technical and diagrammatic.

   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:      #C8761A;   /* fills, large type            */
  --primary-text: #8A4E08;   /* small text on white  5.01:1  */
  --primary-fill: #8A4E08;   /* white text on it     5.01:1  */
  --primary-dark: #6E3E06;   /* hover                6.28:1  */
  --primary-lite: #E08A2A;   /* on near-black        4.99:1  */
  --primary-soft: #FBF1E4;
  --black:        #171717;
  --black-50:     #2C3237;
  --black-200:    #31373F;
  --ink:          #23262B;
  --ink-2:        #4B5158;
  --ink-3:        #69707A;   /* on white 4.71:1 */
  --white:        #FFFFFF;
  --gray-50:      #EEF5F8;
  --gray-100:     #F4F4F4;
  --gray-200:     #E1E1E1;
  --gray-300:     #DFE2E9;
  --line:         #DBD8D2;

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

  /* Display face, used on headings only. */
  --font-display: 'Chivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:    2px;
  --radius-lg: 4px;

  --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); }
/* Figures line up when they are set in mono. */
.stat, .stat__n, .figure-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }