/* =====================================================================
   BIZFLOW SERVICE-SITE TEMPLATE — CLIENT THEME
   ---------------------------------------------------------------------
   The ONE styling file that changes per client. styles.css is frozen and
   shared; it references the role tokens defined here. Linked BEFORE
   styles.css on every page. Mirrors the `theme` block in client.config.js.

   ===== CURRENT CLIENT: Bold Gold Lawn Services =====
   Brand: green + navy. White / soft off-white surfaces. Brown = minor earth
   accent only. Fonts: Alegreya Sans SC (display) + Barlow (body).

   CONTRAST NOTE (WCAG 2.2 AA — all pairs verified ≥4.5:1 normal text):
   The brand green #09A444 FAILS as normal text on white (3.28:1) and as a
   white-text button fill (3.28:1). Because styles.css is frozen, --accent
   serves both roles, so --accent is set to a slightly deeper green #0B8537
   (4.75:1 both ways — the "small shift" the client won't notice). The TRUE
   brand green #09A444 is kept as --accent-on-dark, where it shines on navy
   (5.08:1). Solid buttons therefore read as #0B8537 green with white text.
   Accent TEXT on light surfaces uses --accent-text #096E2D: #0B8537 clears
   white (4.75:1) but slips under 4.5:1 on --surface-soft/--surface-tint.
   ===================================================================== */
:root{

  /* ---- ACCENT (brand green) ----------------------------------------
     --accent          green for CTAs/accents/rules/borders (white-text fill).
                        Deepened to #0B8537 for AA (see note).
     --accent-text     accent TEXT on light surfaces — deep green #096E2D so
                        small text clears 4.5:1 on the off-white sections too
     --accent-deep     hover/active state
     --accent-rgb / --accent-deep-rgb  as R,G,B for rgba() overlays/shadows
     --accent-on-dark  the TRUE brand green #09A444 — accent text on dark (navy)
     --accent-pale     pale green note text on the full-accent band */
  --accent:          #0B8537;
  --accent-text:     #096E2D;
  --accent-deep:     #096E2D;
  --accent-rgb:      11,133,55;
  --accent-deep-rgb: 9,110,45;
  --accent-on-dark:  #09A444;
  --accent-pale:     #F3FBF6;

  /* ---- DARK SURFACES (navy) ----------------------------------------
     header, footer, dark sections, placeholders. White text on all of
     these clears AA comfortably (≥14:1). */
  --surface-dark:     #001F3C;  /* base navy: header, footer, .section--dark */
  --surface-dark-rgb: 0,31,60;  /* base navy as R,G,B for rgba() — hero photo overlay */
  --surface-dark-alt: #04284A;  /* lifted navy: stats strip */
  --surface-dark-2:   #042A4D;  /* cards on dark (.reason), map frame */
  --surface-dark-3:   #06335C;  /* photo-placeholder fill */
  --surface-dark-4:   #0A3E6E;  /* photo-placeholder border */
  --hero-1:           #023059;  /* hero gradient — top stop */
  --hero-2:           #001F3C;  /* hero gradient — mid stop */
  --hero-3:           #00152A;  /* hero gradient — bottom stop */

  /* ---- LIGHT SURFACES ---------------------------------------------- */
  --surface:      #FFFFFF;  /* page background, cards */
  --surface-soft: #F5F8F3;  /* soft off-white — alternating sections */
  --surface-tint: #FAFCF8;  /* lightest off-white — widget-slot fill */

  /* ---- INK / PROSE (cool, neutral — not warm) ---------------------- */
  --ink:          #14241A;  /* headings, strong text (faint green-black) */
  --ink-warm:     #20302A;  /* lead / emphasised prose */
  --prose:        #2A3A30;  /* default body copy */
  --prose-strong: #1A2820;  /* highest-contrast prose */
  --muted:        #5E6E64;  /* captions, citations, de-emphasised text */

  /* ---- LINES / BORDERS --------------------------------------------- */
  --line:           #E3E8E0;  /* hairlines on light surfaces */
  --line-dark:      #0A3A66;  /* hairlines on dark (navy) surfaces */
  --line-warm:      #D5DED2;  /* card hover border */
  --line-warm-soft: #C8D2C5;  /* dashed widget-slot border */

  /* ---- FONTS (keep in sync with the Google Fonts <link> in each head)
     Alegreya Sans SC is a small-caps display face; headings are also
     uppercased in CSS. Use the Black (900) weight for headings. */
  --display: 'Alegreya Sans SC', 'Arial Narrow', sans-serif;  /* headings */
  --body:    'Barlow', 'Helvetica Neue', Arial, sans-serif;    /* body copy */
  /* Heading/display/button weight. Alegreya Sans SC Black (900) per the brand
     guide; the 900 weight is requested in the Google Fonts link. styles.css
     falls back to 600 when this is unset. */
  --display-weight: 900;
  /* Body (Barlow) weights — keep in sync with the Google Fonts link (400;600;800 + 400 italic). */
  --lead-weight:   600;   /* intros / leads (.lead, .hero-sub) */
  --strong-weight: 800;   /* bold emphasis in prose (<strong>/<b>) — the brand's Extra-Bold */

  /* ---- 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");
}