/* ===========================================================================
   Solar Hub — Design System tokens (v3: light, premium, bespoke)
   Derived from the Solar Hub brand (deep blue + solar gold), in the airy,
   curved, rounded spirit of premium NZ sites — not copied from any of them.
   =========================================================================== */
:root {
  /* ---- Colour palette -------------------------------------------------- */
  /* Deep brand primary — headings, dark sections, structure */
  --ink: #0c2438;            /* near-black brand navy: primary text */
  --brand: #0f5c87;          /* deep Solar Hub blue: links, brand marks */
  --brand-deep: #0a3f5f;     /* darker blue for gradients/hovers */
  --brand-sky: #5bb0d6;      /* bright highlight: accents, focus, charts */

  /* Warm accent for CTAs (the "sun") — gold, used sparingly, ink text on top */
  --accent: #ffc638;         /* solar gold: primary CTAs */
  --accent-deep: #f0ad1f;    /* hover */
  --accent-soft: #fff3d1;    /* tint backgrounds */

  /* Positive / savings */
  --green: #18a06b;
  --green-soft: #e4f6ee;

  /* Surfaces */
  --bg: #f3f8fb;             /* soft cool off-white canvas */
  --bg-warm: #fbf7f0;        /* warm off-white for alternating bands */
  --surface: #ffffff;        /* cards */
  --ink-section: #0c2438;    /* dark band background */

  /* 3 neutral text shades */
  --text: #16344a;           /* body text */
  --text-mid: #4f6b7c;       /* secondary text */
  --text-soft: #7e98a8;      /* captions, hints */
  --on-dark: #eaf3f8;        /* text on dark sections */
  --on-dark-mid: #9fbccd;

  /* Lines / borders */
  --line: #e2edf3;
  --line-strong: #cfe0ea;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  /* Fluid type scale (clamp) */
  --fs-hero: clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.45vw, 1.35rem);
  --fs-body: 1.05rem;
  --fs-sm: 0.9rem;
  --fs-eyebrow: 0.8rem;

  /* ---- Spacing scale --------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --sh-sm: 0 2px 8px rgba(12, 36, 56, 0.06);
  --sh: 0 12px 32px rgba(12, 36, 56, 0.1);
  --sh-lg: 0 28px 70px rgba(12, 36, 56, 0.16);
  --sh-accent: 0 12px 30px rgba(255, 198, 56, 0.4);

  /* ---- Layout ---------------------------------------------------------- */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --header-h: 84px;
  --promo-h: 42px;           /* promo bar height (offsets nav + hero when live) */
}