/*
 * 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-hover);
  /* No second brand hue to bridge as "accent" since the 2026-09-08 color
     audit -- this brand's real palette is 3 colors (red/graphite/white),
     confirmed against Colores_y_Tipografia_2026-09-08.html. Any component
     asking for a distinct "accent" gets the same red as primary. */
  --lib-color-accent: var(--jr-color-primary);
  --lib-color-muted: var(--jr-color-text-muted);
  --lib-color-panel: var(--jr-color-surface);
  --lib-color-panel-soft: var(--jr-color-surface-tint);
  --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);
  /* Real off-brand leaks found in the 2026-09-08 color audit: a --lib-*
     role this project's components actually use, with no bridge entry
     here, silently falling back to hhds-web-library's own generic
     default instead of this brand's palette.
     --lib-color-star was rendering the review stars (rating-stars.css,
     live on every Google review card sitewide) in the library's raw
     #facc15 -- a bright yellow that doesn't exist anywhere else on this
     site. Stars are a semantic "rating" indicator, not a brand fill, so
     this bridges to the system alert/yellow token, not to red. */
  --lib-color-star: var(--jr-color-alert);
  --lib-color-star-stroke: color-mix(in srgb, var(--jr-color-alert) 70%, black);
  /* --lib-color-ink was coloring each review card's reviewer name
     (testimonial-card.css) in the library's raw #0f172a (a navy-slate)
     instead of this brand's own near-black. */
  --lib-color-ink: var(--jr-color-ink);
  /* --lib-shadow-button (tokens-base.css) ships an unbridged blue
     rgba(11, 99, 206, ...) -- not consumed by anything in this project
     today (2026-09-08 button audit found it defined but unused), but a
     "button" token holding an off-brand blue is exactly the kind of
     thing that audit exists to catch before some future button actually
     reaches for it. */
  --lib-shadow-button: 0 0.75rem 1.75rem color-mix(in srgb, var(--jr-color-primary) 24%, transparent);
  --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 the one brand red) -- the only
   accent this brand has to highlight a title's key phrase with. */
.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.
   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;
}