/* =====================================================================
   BIZFLOW SERVICE-SITE TEMPLATE — CLIENT THEME
   ---------------------------------------------------------------------
   This is the ONE styling file that changes per client. styles.css is
   frozen and shared; it only references the role tokens defined here.
   Every page links this file BEFORE styles.css.

   To theme a new client: set the COLOR and FONT tokens below to the
   client's brand (and update the Google Fonts <link> in each page head).
   The LAYOUT tokens at the bottom are structural and rarely change.

   Mirrors the `theme` block in client.config.js (config = source of truth).
   Verify every text/background pair against WCAG 2.2 AA. See CONFIG.md.

   ===== CURRENT CLIENT: Tim Snelson's Pumping Unit Service =====
   Brand: black / white / red. Accent red shifted to #D81019 for AA contrast.
   ===================================================================== */
:root{

  /* ---- ACCENT (brand) ----------------------------------------------
     --accent          CTAs, accents, rules, borders (on LIGHT surfaces)
     --accent-deep     hover/active state of the accent
     --accent-rgb      same as --accent, as R,G,B for rgba() overlays
     --accent-deep-rgb same as --accent-deep, for rgba() shadows
     --accent-on-dark  accent is too dark to read as TEXT on dark surfaces;
                       this lighter tint is used for accent text on dark
     --accent-pale     pale accent tint (e.g. note text on the accent band) */
  --accent:          #D81019;
  --accent-deep:     #C4141B;
  --accent-rgb:      216,16,25;
  --accent-deep-rgb: 196,20,27;
  --accent-on-dark:  #ff5b61;
  --accent-pale:     #ffd2d4;

  /* ---- DARK SURFACES (header, footer, dark sections, placeholders) --
     A ramp of near-black brand tones. For a navy/other dark brand,
     shift ALL of these together so dark sections read in-brand. */
  --surface-dark:     #141414;  /* base: header, footer, .section--dark */
  --surface-dark-alt: #1F1F1F;  /* lifted: stats strip */
  --surface-dark-2:   #1c1c1c;  /* cards on dark (.reason), map frame */
  --surface-dark-3:   #222;     /* photo-placeholder fill */
  --surface-dark-4:   #2c2c2c;  /* photo-placeholder border */
  --hero-1:           #252525;  /* hero gradient — top stop */
  --hero-2:           #161616;  /* hero gradient — mid stop */
  --hero-3:           #0d0d0d;  /* hero gradient — bottom stop */

  /* ---- LIGHT SURFACES ---------------------------------------------- */
  --surface:      #FFFFFF;  /* page background, cards */
  --surface-soft: #F4F1EA;  /* "bone" — alternating section background */
  --surface-tint: #fbf9f4;  /* lightest off-white — widget-slot fill */

  /* ---- INK / PROSE (text) ------------------------------------------
     A warm ramp. For a cool/neutral brand, set these to neutral greys. */
  --ink:          #1B1B1B;  /* headings, strong text */
  --ink-warm:     #34302a;  /* lead / emphasised prose */
  --prose:        #3c382f;  /* default warm body copy */
  --prose-strong: #2b2823;  /* highest-contrast warm prose ("Our Word") */
  --muted:        #6E6E6E;  /* captions, citations, de-emphasised text */

  /* ---- LINES / BORDERS --------------------------------------------- */
  --line:           #E4DFD4;  /* hairlines on light surfaces */
  --line-dark:      #313131;  /* hairlines on dark surfaces */
  --line-warm:      #d6cfc0;  /* card hover border */
  --line-warm-soft: #c9c2b3;  /* dashed widget-slot border */

  /* ---- FONTS (per client; keep in sync with the Google Fonts <link>) */
  --display: 'Oswald', 'Arial Narrow', sans-serif;     /* headings/display */
  --body:    'Lora', Georgia, 'Times New Roman', serif; /* body copy */

  /* ---- LAYOUT (structural — standard across clients) --------------- */
  --maxw:  1200px;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);
  --sec-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Subtle film-grain texture overlay (data-URI; no asset needed). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Client-side fix (Lighthouse image-aspect-ratio, QA 2026-07-11): .brand is a
   column flexbox in the frozen styles.css, so its default align-items:stretch
   widens the wordmark <img> (~7% horizontal distortion; height:Xpx + width:auto
   can't override a flex stretch). Pin the logo to its intrinsic ratio here.
   NOTE for the base template repo: this belongs in styles.css .brand__logo. */
.brand__logo{align-self:flex-start}