/* King Exterior brand tokens.
   GENERATED from clients/king-exterior/site.config.json by build.py. Do not edit.

   Every value here was extracted from the served CSS at kingexterior.com
   (Beaver Builder theme-customizer block, --wp--preset--color--fl-*), not
   eyeballed from a screenshot and not taken from a generic contractor theme.

   The content domination engine reads --primary-color, --heading-font and
   --body-font to style generated pages, so those names are load-bearing. */

:root {
  /* Brand. Gold is the one colour the old theme was actually configured with. */
  --accent-color: #eac92d;
  --accent-border: #c6a714;
  --accent-deep: #8a7410;

  /* Content-engine contract names. */
  --primary-color: #000000;
  --primary-light: #333333;
  --primary-dark: #000000;
  --secondary-color: #eac92d;

  --text-color: #000000;
  --text-muted: #4a4a4a;
  --bg-color: #ffffff;
  --bg-alt: #f7f6f2;
  --border-color: #e2e2e2;

  /* Brand frame outline. A FIXED ink value, never a background token - the
     whole point of the E2 note in style.css. */
  --frame-outline: #4a4a4a;
  --frame-max: 420px;
  --ctl-h-mobile: 1180px;
  --ctl-h-tablet: 880px;
  --ctl-h-desktop: 920px;
  /* Short form (hero + /about/). tablet == desktop by design: the
     .ctl-form-short cap is 500, below the container inner width from
     768 up, so the column stops changing there. */
  --ctl-h-short-mobile: 1223px;
  --ctl-h-short-mobile-390: 1109px;
  --ctl-h-short-mobile-414: 972px;
  --ctl-h-short-mobile-480: 776px;
  --ctl-h-short-tablet: 820px;
  --ctl-h-short-desktop: 820px;

  /* Type. Roboto Slab headings over Inter body is the extracted pairing.
     DM Sans 700 is the stat/numeral face, not a heading or body face. */
  --heading-font: 'Bodoni Moda', serif;
  --heading-weight: 400;
  --heading-line-height: 1.4;
  --body-font: 'Inter', sans-serif;
  --body-weight: 300;
  --body-size: 18px;
  --body-line-height: 1.6;
  --display-font: 'DM Sans', sans-serif;
  --display-weight: 700;

  --h1-size: 45px;
  --h1-size-tablet: 36px;
  --h1-size-mobile: 32px;
  --h2-size: 40px;
  --h2-size-tablet: 30px;
  --h2-size-mobile: 28px;
  --heading-tight: 1.2;

  /* Type ladder below h2. COMPUTED in pages.py from values already in this
     config, not invented and not a new modular-scale system:

       ratio  = h1 desktop / h2 desktop = 45/40 = 1.125
       anchor = body_size = 18px
       check  = 18 / 1.125 = 16px, which is button.font_size, already in config

     Two independent config values agree on the ratio, so the ladder is the
     config's own system extended to the steps it never named. Everything below
     h2 used to be a bare px literal in style.css at ten unrelated values.
     --fs-fine is deliberately OFF the ladder: 12.5px is an A2P acceptance
     criterion (consent text must fit one 1280x800 screenshot), not a design
     choice, so it is frozen. */
  --fs-fine: 12.5px;
  --fs-meta: 14px;
  --fs-sm: 16px;
  --fs-base: 18px;
  --fs-lg: 20px;
  --fs-xl: 23px;
  --fs-2xl: 26px;
  --fs-display: 36px;

  /* Buttons, extracted from a.fl-button. */
  --btn-radius: 4px;
  --btn-padding: 12px 24px;
  --btn-font-size: 16px;
  --btn-line-height: 18px;

  /* Rhythm. One 8px-grid scale, 8/16/24/40/64/96.
     --section-y is the ONLY vertical value any top-level section boundary may
     use: .section, .hero and .site-footer all read it. Before this they ran
     three different rhythms (48/80, 48/64/88/104, and 64) so no two boundaries
     on a page agreed. */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --section-y: 48px;
  --section-y-lg: 80px;
  --container-width: 1180px;
  --container-padding: 0 20px;
}

/* MOBILE VERTICAL SCALE - ONE PLACE, NOT THREE ONE-OFF EDITS.
   ---------------------------------------------------------------------------
   The desktop rhythm was being applied unchanged at 390px, where it reads as
   dead space rather than as breathing room. Three symptoms were reported and
   all three are the same cause, which is why this is a scale and not three
   patches:

     cta_band -> footer   two black bands meeting, so their paddings SUM. The
                          footer reads --section-y-lg, which was 80px on
                          mobile as well as desktop, on top of the band's 48.
     areas collage        the component gap under the caption is --space-xl.
     intro section        the band padding under the chevron divider.

   Stepping the tokens down here moves every boundary that reads them, which is
   the whole point: a boundary nobody has looked at yet gets the mobile value
   automatically instead of waiting to be reported.

   --section-y-lg stays SLIGHTLY above --section-y so the footer still reads as
   a heavier boundary than a section break, which is the distinction the two
   tokens exist to make. Collapsing them to one number would fix the spacing by
   deleting the hierarchy. */
@media (max-width:767px){
  :root{
    --space-xl: 40px;
    --space-2xl: 56px;
    --section-y: 36px;
    --section-y-lg: 44px;
  }
}