/* ==========================================================================
   Ballantyne Renewables — design tokens
   --------------------------------------------------------------------------
   Every value below is lifted from the Webflow export
   (css/ballantyne-staging.webflow.css). Names are semantic so templates and
   quiz.css never reference a raw hex.

   Palette (from the export's :root):
     --theme--color-01      #62aac2  soft blue      → primary accent, pills
     --theme--color-02      #0d182f  deep navy      → dark sections, footer, ink
     --theme--color-03      #999ca2  cool grey      → muted UI, disabled
     --neutral--neutral-01  #ffffff  white          → cards / surfaces
     --neutral--neutral-02  #fffefb  warm off-white → page background
     --neutral--neutral-03  #666563  warm grey      → body copy
     --neutral--neutral-04  #35383a  near-black     → high-contrast headings
   Warm section neutrals seen in the export: #f8f3ec #f5eeea #eae3df #e0dad5
   Occasional accents in the export: #b79383 (bronze) #8ea5a0 (sage)

   Type: Manrope (headings) + Inter (body), tight tracking (-0.02 / -0.035em).
   Radius scale: 8 / 20 / 24 / 48. Container 80rem. Section padding ~120px.
   Direction: calm, professional, British, editorial. NOT eco-green, NOT
   hard-sell. "A knowledgeable person explaining something across a kitchen
   table."
   ========================================================================== */

:root {
  /* --- Brand core --- */
  --bal-blue:        #62aac2;   /* primary accent, pill buttons, active states */
  --bal-blue-700:    #33788f;   /* AA-safe blue for links / text on white */
  --bal-blue-100:    #e8f1f5;   /* tint: quiet blue section / chip fill */
  --bal-navy:        #0d182f;   /* dark sections, footer, primary CTA fill */
  --bal-navy-900:    #080f1f;   /* deepest navy — hover on navy CTA */
  --bal-grey:        #999ca2;   /* muted UI, meta, disabled */

  /* --- Backgrounds / surfaces --- */
  --bal-bg:          #fffefb;   /* warm off-white — main page background */
  --bal-bg-alt:      #f8f3ec;   /* warm neutral section */
  --bal-bg-warm:     #f5eeea;   /* second warm section / quote blocks */
  --bal-surface:     #ffffff;   /* cards, framed blocks */
  --bal-surface-2:   #eae3df;   /* inset / hairline-heavy card */

  /* --- Text & neutrals --- */
  --bal-ink:         #35383a;   /* headings on light */
  --bal-ink-soft:    #0d182f;   /* alt heading ink (navy) */
  --bal-body:        #666563;   /* body copy */
  --bal-muted:       #999ca2;   /* captions / eyebrow / meta */
  --bal-line:        #e0dad5;   /* hairlines on light */
  --bal-line-dark:   rgba(255,255,255,.14); /* hairlines on navy */
  --bal-on-dark:     #f4f6f8;   /* body text on navy sections */
  --bal-on-dark-mut: #9aa4b2;   /* muted text on navy */

  /* --- Secondary accents (used sparingly) --- */
  --bal-bronze:      #b79383;
  --bal-sage:        #8ea5a0;
  --bal-ring:        #e5e0d9;   /* decorative ring strokes (--others--color-01 in the export) */
  --bal-grey-panel:  #999ca2;   /* --theme--color-03, used for the stats panel in the export */

  /* --- Feedback --- */
  --bal-ok:          #2f7d5b;
  --bal-warn:        #b4671f;
  --bal-err:         #990931;

  /* --- Typography --- */
  --bal-font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bal-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid scale — endpoints match the export's responsive steps
     (h1 56→36, h2 48→30, h3 34→24, h4 28→20). */
  --bal-h1:     clamp(2.25rem, 1.30rem + 3.6vw, 3.5rem);
  --bal-h2:     clamp(1.875rem, 1.30rem + 2.4vw, 3rem);
  --bal-h3:     clamp(1.5rem, 1.24rem + 1.1vw, 2.125rem);
  --bal-h4:     clamp(1.25rem, 1.12rem + 0.55vw, 1.75rem);
  --bal-lead:   clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  --bal-body-sz: 1rem;      /* 16px */
  --bal-small:  0.875rem;   /* 14px */
  --bal-18:     1.125rem;   /* 18px */
  --bal-20:     1.25rem;    /* 20px */

  --bal-lh-tight:  1.2;     /* h1 */
  --bal-lh-head:   1.25;    /* h2 */
  --bal-lh-h3:     1.46;
  --bal-lh-body:   1.56;

  --bal-track-display: -0.035em;
  --bal-track-head:    -0.02em;
  --bal-track-tight:   -0.018em;
  --bal-track-eyebrow: 0.14em;

  --bal-fw-regular:  400;
  --bal-fw-medium:   500;
  --bal-fw-semibold: 600;
  --bal-fw-bold:     700;

  /* --- Layout --- */
  --bal-container:        80rem;   /* 1280px — from .container-large */
  --bal-container-narrow: 48rem;   /* 768px — long-form prose / forms */
  --bal-container-wide:   90rem;   /* wide header row */
  --bal-gutter:  clamp(1.25rem, 0.6rem + 3vw, 1.875rem);  /* 20 → 30px */
  --bal-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);      /* → 120px */
  --bal-section-y-sm: clamp(2.5rem, 1.6rem + 3.5vw, 4.25rem);

  /* --- Shape --- */
  --bal-radius-sm:   8px;
  --bal-radius:      20px;
  --bal-radius-lg:   24px;
  --bal-radius-xl:   48px;
  --bal-radius-pill: 999px;

  /* --- Elevation (light, editorial) --- */
  --bal-shadow-sm: 0 1px 2px rgba(13,24,47,.05), 0 6px 20px rgba(13,24,47,.05);
  --bal-shadow-md: 0 18px 44px rgba(13,24,47,.10);
  --bal-shadow-lg: 0 36px 80px rgba(13,24,47,.16);

  /* --- Motion --- */
  --bal-ease:     cubic-bezier(.16, 1, .3, 1);
  --bal-ease-out: cubic-bezier(.22, .61, .36, 1);
  --bal-dur:      .45s;

  /* --- Header --- */
  --bal-header-h: 84px;

  /* --- Legacy aliases ---------------------------------------------------
     Guard against any inline style / earlier quiz.css that referenced the
     Save With Solar green names. Map them onto Ballantyne values so nothing
     renders invisible if a reference is missed. Grep before deleting. */
  --sws-green:      var(--bal-blue-700);
  --sws-green-dark: var(--bal-navy);
  --sws-navy:       var(--bal-navy);
  --sws-gold:       var(--bal-blue);
  --sws-bg:         var(--bal-bg);
  --sws-ink:        var(--bal-ink);
  --sws-body:       var(--bal-body);
  --sws-line:       var(--bal-line);
}

@media (max-width: 600px) {
  :root { --bal-header-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --bal-dur: 0.001s; }
}