/*
 * Bridges the site's existing --jr-* brand tokens (tokens-joes-roofing.css)
 * onto the --lib-* color/font roles hhds-web-library components expect.
 * Loaded after tokens-base.css (structural: spacing/sizing/shadows) and
 * tokens-joes-roofing.css (brand values) so both are available here.
 */
:root {
  --lib-color-primary: var(--jr-color-primary);
  --lib-color-primary-strong: var(--jr-color-primary-dark);
  --lib-color-accent: var(--jr-color-accent-gold);
  --lib-color-muted: var(--jr-color-text-muted);
  --lib-color-panel: var(--jr-color-surface);
  --lib-color-panel-soft: var(--jr-color-surface-warm);
  --lib-color-inverse: var(--jr-color-text-inverse);
  --lib-color-deep-muted: var(--jr-color-graphite);
  --lib-color-success: var(--jr-color-primary);
  /* Tried a dark-red tint here first (reasoning: "make it visibly carry
     the brand's red"), but the owner flagged it live -- that red doesn't
     actually appear anywhere else on the real site, so it read as an
     invented color, not "on brand". --jr-color-graphite is what the
     section right after the reviews band already uses as its own
     background, so matching it here reads as continuous with the real
     page instead of a one-off panel color nothing else shares. */
  --lib-color-surface-card-dark: var(--jr-color-graphite);
  --lib-font-heading: var(--jr-font-heading);
  --lib-font-body: var(--jr-font-body);

  /* card-blog panel (hhds-web-library) -- library defaults use a navy
     (#0a192f) tint site-wide; swapped for our own --jr-color-graphite so
     the "glass panel" reads as this brand's dark surface, not a generic
     one, same reasoning as --lib-color-surface-card-dark above. */
  --lib-color-blog-card-panel: color-mix(in srgb, color-mix(in srgb, var(--jr-color-graphite) 55%, transparent) 78%, rgba(39, 37, 42, 0.28));
  --lib-color-blog-card-overlay-top: rgba(39, 37, 42, 0.04);
  --lib-color-blog-card-overlay-mid: rgba(39, 37, 42, 0.18);
  --lib-color-blog-card-overlay-bottom: rgba(39, 37, 42, 0.6);
  --lib-color-blog-card-backdrop-tint: rgba(39, 37, 42, 0.28);
}

/* Copy LAW #2 (Web_Build_System.md): one key phrase per h1/h2/h3, marked
   with this exact class -- mirrors hhds-web-library/adapters/wordpress/
   generation/generation.css so hand-built Elementor pages stay visually
   consistent with factory-generated ones. Color-only, no bold/background.
   Uses the project's own pre-existing --color-title-highlight token
   (tokens-joes-roofing.css, resolves to brand red) -- NOT --lib-color-accent
   (gold), which brand-identity.md documents as an accent to use sparingly,
   not for 20+ repeated title spans site-wide. */
.hhds-title-highlight {
  color: var(--color-title-highlight);
}

/* The Roofing Services grid overlays these labels directly on the photo
   tiles -- brand-red text is hard to read against varied photo backgrounds,
   keep these white like the rest of the label instead. Same contrast
   exception already applied to the trust strip (trust-strip.css).
   2026-08-20: this rule never actually matched -- the section's real class
   is .jr-services (services-grid.css), not .services-grid. Every service
   name (jr_title_highlight() wraps the whole title as the "highlight"
   here) has been rendering in --color-title-highlight red this whole
   time instead of white as originally intended -- owner flagged it live. */
.jr-services .hhds-title-highlight {
  color: inherit;
}