/* ==========================================================================
   CLEAN POWER AUSTRALIA — DESIGN TOKENS
   Source of truth: Claude Design "Clean Power Australia design system",
   itself derived from the CPA New-Lead Nurture Emails project.
   Do not hard-code hex anywhere else in the theme. Use these variables.

   SIZING APPROACH
   Type and spacing are fluid via clamp(), not stepped at breakpoints.
   Stepped sizing meant an H1 dropped from 54px to 42px on a single pixel of
   resize, and looked deliberately right at exactly three widths and roughly
   right everywhere else. clamp() scales continuously, so a 1366px laptop, a
   1512px MacBook and a 2560px desktop all get proportionate type rather than
   whichever step they happen to land in.

   Each clamp is min / preferred / max where the preferred term is
   "rem base + vw" — the rem keeps it readable if a user zooms, the vw does
   the scaling. Body copy never scales below 16px.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

/* Gilroy is the brand display family. Weights above 500 are never used.
   Files are served from /wp-content/uploads/fonts/ and located at runtime by
   inc/fonts.php; until they exist the stack falls through to Space Grotesk,
   so nothing renders in a system serif at any point. */

:root {
  /* Blues — two tier, split by job.
     WCAG audit, August 2026: #0096CC behind white text measures 3.37:1 and
     fails SC 1.4.3, which needs 4.5:1. That one pairing accounted for 83 of
     the 204 AA failures on its own, because it painted the header CTA on
     every page. The colour is not retired: it is now reserved for the jobs
     where 3:1 is the bar (borders, rules, icon strokes, focus rings, large
     display numerals) and --cpa-blue-action carries anything that fills a
     surface behind text or is itself body-sized text.

     Ratios on white: action 7.10:1 (clears AAA), hover 8.85:1, deep 7.10:1.
     If the brand ever wants the fills brighter again, #007BA8 gives 4.77:1
     and still passes AA, just not AAA. Do not go above that. */
  --cpa-blue:        #0096CC;
  --cpa-blue-action: #005F82;
  --cpa-blue-hover:  #00506E;
  --cpa-blue-deep:   #005F82;
  --cpa-blue-bright: #3DBFF0;
  /* Step and feature numerals. Previously --cpa-blue at 0.4/0.5 opacity,
     which composited to #99D5EB (1.61:1) and #80CBE6 (1.81:1) on white and
     failed even the 3:1 large-text bar. Solid, so it does not drift when the
     numeral lands on a band rather than paper. 3.98:1 on white, 3.58:1 on
     the band. */
  --cpa-blue-numeral: #3E88A6;
  --cpa-blue-mid:    #3F99D1;
  --cpa-blue-tint:   #C5ECFB;
  --cpa-blue-wash:   #D8F4FF;
  --cpa-blue-mist:   #F2F6F7;
  --cpa-blue-paper:  #F9FEFF;

  /* Yellow is an accent only: underlines and micro flourishes. */
  --cpa-yellow:      #FAB94B;
  --cpa-yellow-dark: #F2CD00;
  --cpa-yellow-soft: #FFD966;

  /* Neutrals */
  --cpa-cream:   #F7F2E8;
  --cpa-paper:   #FFFFFF;
  --cpa-ink:     #303130;
  /* Ink-2 was #5B5F61, 6.45:1 on white: passes AA, misses AAA by half a point
     across 111 instances. #4A4E50 gives 8.41:1 on white and 7.33:1 on the
     blue wash, so secondary copy now clears AAA on both surfaces. Worth
     having for a customer base skewing over 45. */
  --cpa-ink-2:   #4A4E50;
  /* Ink-3 was #787A78. Lighthouse/axe flagged it across 10-11 pages where WAVE
     did not, because it paints form placeholders and axe tests those while WAVE
     skips them. Worst case measured 3.77:1 against the light surfaces actually
     in use (#FFFFFF, #F9FEFF, #F7F2E8, #EDF4F7, #F2F6F7, #D8F4FF), so it failed
     SC 1.4.3. #666866 gives 4.90:1 on the worst of those and clears AA.
     #6B6D6B also passes at 4.55:1 but leaves almost no margin. */
  --cpa-ink-3:   #666866;
  /* Ink-4 is footer-only, on --cpa-ink (#303130), where it measures 5.59:1 and
     passes. Do not use it on a light surface. */
  --cpa-ink-4:   #ABA9AA;
  --cpa-line:    #E7E2D8;
  --cpa-line-blue: rgba(61, 191, 240, 0.40);
  --cpa-shadow:  rgba(48, 49, 48, 0.15);

  /* Semantic */
  --cpa-success: #1F8A5B;
  --cpa-error:   #E30613;
  --cpa-error-text: #B3000F;

  /* Surface aliases.
     Cream (#F7F2E8) came from the nurture email design system but is not a
     Clean Power brand surface. Retained as a token only so nothing breaks;
     never used as a page or section background. */
  --bg-page: var(--cpa-paper);
  --bg-card: var(--cpa-paper);
  --bg-band: var(--cpa-blue-mist);
  --fg-primary: var(--cpa-ink);
  --fg-secondary: var(--cpa-ink-2);
  --fg-on-blue: #FFFFFF;

  /* Families */
  --font-display: "Gilroy", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — 360px viewport through to 1600px */
  --fs-display:  clamp(2.375rem, 1.05rem + 5.9vw, 5.1875rem);  /* 38 → 83 */
  --fs-h1:       clamp(2.125rem, 1.34rem + 3.5vw, 3.875rem);   /* 34 → 62 */
  --fs-h2:       clamp(1.75rem,  1.37rem + 1.7vw, 2.625rem);   /* 28 → 42 */
  --fs-h3:       clamp(1.375rem, 1.21rem + 0.73vw, 1.75rem);   /* 22 → 28 */
  --fs-h4:       clamp(1.1875rem, 1.14rem + 0.2vw, 1.3125rem); /* 19 → 21 */
  --fs-eyebrow:  clamp(0.75rem, 0.72rem + 0.14vw, 0.875rem);   /* 12 → 14 */
  --fs-body:     1rem;                                          /* never scales down */
  --fs-body-lg:  clamp(1rem, 0.96rem + 0.16vw, 1.125rem);      /* 16 → 18 */
  --fs-lead:     clamp(1rem, 0.93rem + 0.31vw, 1.1875rem);     /* 16 → 19 */
  --fs-meta:     0.8125rem;

  --lh-display: 1.04;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.06em;

  /* Radii */
  --radius-card: 12px;
  --radius-pill: 999px;
  --radius-input: 26px;
  --radius-image: 10px;
  --radius-soft: 40px;

  /* Spacing — fixed steps for component internals */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Fluid rhythm — the vertical gaps that most affect how a page feels
     at different widths */
  --section-y: clamp(3rem, 1.9rem + 4.9vw, 6rem);      /* 48 → 96 */
  --gutter:    clamp(1.125rem, 0.98rem + 0.65vw, 1.75rem); /* 18 → 28 */
  --gap-grid:  clamp(1.25rem, 0.95rem + 1.3vw, 2.5rem);    /* 20 → 40 */

  /* Shadows + motion */
  --shadow-card: 0 4px 16px var(--cpa-shadow);
  --shadow-card-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-cta: 0 5px 20px var(--cpa-shadow);
  --transition-fast: 150ms ease-out;
  --transition-base: 220ms ease-out;

  /* Section band. The alternate background used to separate one section from
     the next. #F2F6F7 sat about 3% off white, so bands were invisible and the
     page read as one continuous slab. This is still quiet, but you can see
     where a section starts and stops. */
  --cpa-band: #EDF4F7;

  /* Layout.
     --wrap is the general container: grids, cards, headers, footers.
     --wrap-text is a narrower cap for running prose, because a paragraph
     1440px wide is harder to read even though it fills the screen better.
     --wrap-wide is for bands that should breathe on large monitors.

     Above 1440px the container stops growing by design. On a 2560px monitor
     that leaves margin either side, which is intentional: line lengths stay
     readable and the layout does not stretch into something nobody designed.
     Full-width backgrounds still run edge to edge, so it reads as a centred
     composition rather than a narrow site. */
  --wrap: 1440px;
  --wrap-text: 780px;
  --wrap-wide: 1680px;

  /* Shared indent. The hero copy block sits in from the container edge, and
     the header logo uses the same value so the two line up on one axis. One
     token, two places: change it here and they cannot drift apart. */
  --edge-indent: clamp(0px, 2.2vw, 52px);

  /* Hero form panel padding. The header CTA uses the same value as a right
     margin, so its right edge lands on the same axis as the submit button
     inside the panel below it. */
  --panel-pad: clamp(1.5rem, 1.1rem + 1.7vw, 2rem);
}

/* Very large screens: nudge the container up slightly and open the rhythm,
   so an ultrawide reads as deliberate rather than letterboxed. */
@media (min-width: 1800px) {
  :root {
    --wrap: 1560px;
    --section-y: 104px;
  }
}

/* Small phones: pull the rhythm in so short screens are not mostly padding. */
@media (max-width: 480px) {
  :root {
    --section-y: 44px;
    --radius-soft: 20px;
  }
}