/* Design tokens extracted from the live site's computed styles (Phase 2).
   Sampled consistently across all 7 pages via Playwright — see each page's
   computed-styles.json under extraction-notes/ for the raw per-page values.

   Note: Avada/Fusion Builder sets most heading font-sizes per-element via
   inline styles (data-fontsize / --fontSize), not through cascading h1-h6
   defaults. The sizes below are the sitewide-consistent values found across
   pages; treat them as a starting point, not a guarantee — check the actual
   element's computed style during Phase 3 build if a heading looks off. */

:root {
  /* Brand colors */
  --color-red: #da2127;       /* links, .fusion-button bg, h2 */
  --color-red-accent: #ec2028; /* CTA/accent bands: "WAIT, THERE'S MORE", Apply Today, clients CTA */
  --color-navy: #1b2c5a;      /* h4 */
  --color-navy-dark: #21366f; /* footer background */
  --color-gray-text: #707070; /* body copy on several pages */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Typography */
  --font-family-base: 'Lato', Arial, Helvetica, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 24px;

  /* Heading line-heights are unitless ratios, matching how the live Avada
     theme defines them. Headings shrink at narrow viewports, so leading has
     to track font-size rather than stay pinned to a desktop pixel value. */
  --font-size-h1: 60px;
  --line-height-h1: 1.2;
  --font-size-h2: 40px;
  --line-height-h2: 1.31;
  --font-size-h3: 32px;
  --line-height-h3: 1.3;
  --font-size-h4: 25px;
  --line-height-h4: 1.26;
  --font-size-h5: 20px;
  --line-height-h5: 1.1;
  --font-size-h6: 13px;
  --line-height-h6: 1.67;
  --font-size-p: 18px;
  --line-height-p: 30px;

  --font-size-button: 13px;
  --line-height-button: 16px;
  --font-weight-button: 700;

  /* Footer */
  --font-size-footer: 15px;
  --line-height-footer: 22px;

  /* Spacing */
  --spacing-button: 11px 23px;
  --spacing-footer: 15px 30px;
  --spacing-header: 0px 30px;

  /* Breakpoints (from avadaMenuVars / fusionScrollToAnchorVars, for reference
     in media queries — CSS custom properties can't be used in @media, so
     hardcode these px values directly when writing breakpoints) */
  --breakpoint-nav-mobile: 1023px; /* side_header_break_point: nav collapses to hamburger at/below this */
  --breakpoint-content: 800px;     /* content_break_point: secondary layout breakpoint */
}