/* ==========================================================================
   Hollywood Broward Roofing — design tokens
   Source: Branding Guidelines v3.0, September 2026.
   Sizes and the type scale come from the ReRoof Figma template.
   Rebranding another site = change this file only.
   ========================================================================== */

:root {
  /* --- Brand color. Guide page 7. ------------------------------------- */
  --hbr-red:        #A30E0F;  /* Roofing Red — CTA and accents ONLY */
  --hbr-charcoal:   #202629;  /* Structural Charcoal — headlines, dark fields */
  --hbr-slate:      #343B3E;  /* Secondary dark */
  --hbr-steel:      #697277;  /* Supporting copy */
  --hbr-roofline:   #F3F4F4;  /* Cards, light fields */
  --hbr-white:      #FFFFFF;  /* Primary canvas */

  /* Derived. Not in the guide — interaction states only, never new brand color. */
  --hbr-red-hover:  #8A0C0D;
  --hbr-red-focus:  rgba(163, 14, 15, 0.35);
  --hbr-hairline:   rgba(32, 38, 41, 0.12);

  /* Semantic roles. Use THESE in components, not the raw names above. */
  --hbr-bg:            var(--hbr-white);
  --hbr-bg-alt:        var(--hbr-roofline);
  --hbr-bg-dark:       var(--hbr-charcoal);
  --hbr-text:          var(--hbr-charcoal);
  --hbr-text-muted:    var(--hbr-steel);
  --hbr-text-on-dark:  var(--hbr-white);
  --hbr-accent:        var(--hbr-red);

  /* --- Type. Guide page 8: Montserrat headings, Inter body. ------------ */
  --hbr-font-head: 'Montserrat', 'Arial Bold', Arial, sans-serif;
  --hbr-font-body: 'Inter', Arial, sans-serif;

  --hbr-w-body:      400;
  --hbr-w-medium:    500;
  --hbr-w-semibold:  600;
  --hbr-w-bold:      700;
  --hbr-w-extrabold: 800;

  /* Scale carried over from the ReRoof template, desktop values.
     NOTE: the template's H2 line height is 60px on 40px text (1.5), looser than
     every other step. Kept faithful for design review. Flagged, not changed. */
  --hbr-size-d1:   60px;  --hbr-lh-d1:   72px;
  --hbr-size-h1:   50px;  --hbr-lh-h1:   60px;
  --hbr-size-h2:   40px;  --hbr-lh-h2:   60px;
  --hbr-size-h3:   30px;  --hbr-lh-h3:   36px;
  --hbr-size-h4:   20px;  --hbr-lh-h4:   30px;
  --hbr-size-body: 20px;  --hbr-lh-body: 30px;
  --hbr-size-nav:  18px;  --hbr-lh-nav:  27px;
  --hbr-size-btn:  18px;  --hbr-lh-btn:  18px;
  --hbr-ls-btn:    0.54px;
  --hbr-size-eyebrow: 18px; --hbr-lh-eyebrow: 21.6px;

  /* --- Space. 8px base. ----------------------------------------------- */
  --hbr-space-1:  4px;
  --hbr-space-2:  8px;
  --hbr-space-3: 16px;
  --hbr-space-4: 24px;
  --hbr-space-5: 32px;
  --hbr-space-6: 48px;
  --hbr-space-7: 64px;
  --hbr-space-8: 96px;
  --hbr-space-9: 120px;

  --hbr-section-y:        var(--hbr-space-9);
  --hbr-section-y-mobile: var(--hbr-space-7);

  /* --- Layout. Container widths read from the ReRoof template. --------- */
  --hbr-container:      1290px;
  --hbr-container-wide: 1651px;
  --hbr-gutter:         24px;
  --hbr-gutter-mobile:  16px;

  /* --- Radius and shadow. --------------------------------------------- */
  --hbr-radius-sm: 4px;
  --hbr-radius:    8px;
  --hbr-radius-lg: 16px;

  --hbr-shadow-s: 0 2px 6.4px rgba(32,38,41,0.03), 0 4.4px 12px rgba(32,38,41,0.06);
  --hbr-shadow-l: 0 0 60px rgba(32,38,41,0.05);

  /* --- Motion. --------------------------------------------------------- */
  --hbr-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --hbr-duration: 200ms;

  /* --- Roof-pitch diagonal. Guide page 8 asks for roof-pitch accents. --- */
  --hbr-pitch-angle: 4deg;
  --hbr-pitch-drop:  48px;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --hbr-size-d1: 44px;  --hbr-lh-d1: 52px;
    --hbr-size-h1: 38px;  --hbr-lh-h1: 46px;
    --hbr-size-h2: 32px;  --hbr-lh-h2: 42px;
    --hbr-size-h3: 26px;  --hbr-lh-h3: 32px;
    --hbr-section-y: var(--hbr-space-8);
  }
}

/* Mobile. No mobile frame exists in the Figma, so every value below is our
   judgment call, not the template's. */
@media (max-width: 767px) {
  :root {
    --hbr-size-d1:   34px; --hbr-lh-d1:   40px;
    --hbr-size-h1:   30px; --hbr-lh-h1:   36px;
    --hbr-size-h2:   26px; --hbr-lh-h2:   32px;
    --hbr-size-h3:   22px; --hbr-lh-h3:   28px;
    --hbr-size-h4:   18px; --hbr-lh-h4:   26px;
    --hbr-size-body: 17px; --hbr-lh-body: 27px;
    --hbr-section-y: var(--hbr-section-y-mobile);
    --hbr-gutter:    var(--hbr-gutter-mobile);
  }
}