/* =====================================================================
   SOLAR SHOP — HERO DESIGN TOKENS (v6 "Split Editorial & Framed Showcase")
   ---------------------------------------------------------------------
   Everything a designer might want to tune globally lives here.
   The hero stylesheet (assets/hero.css) reads these tokens so a single
   adjustment updates sizing, palette, elevation, and motion across all
   breakpoints.
   ===================================================================== */

.hv2 {

  /* ---------- 1. LAYOUT & DIMENSIONS ---------------------------- */
  --hv2-wrap: min(1600px, 100% - 2 * clamp(20px, 4vw, 80px));
  --hv2-pad-top: clamp(90px, 9.8vh, 112px);    /* clears floating header */
  --hv2-pad-bot: clamp(18px, 2.5vh, 30px);
  --hv2-col-gap: clamp(24px, 3vw, 48px);

  /* Framed photo showcase height on desktop */
  --hv2-stage-h: clamp(310px, 37vh, 405px);

  /* Supplied brand assets sizing */
  --hv2-lockup-h: clamp(38px, 3.2vw, 48px);
  --hv2-accred-h: clamp(28px, 2.5vw, 36px);

  /* ---------- 2. PALETTE (from live solarshop.co.nz) ------------ */
  --hv2-bg: #F4F8F0;                           /* signature botanical cream-sage */
  --hv2-bg-warm: #FBF8F1;                      /* soft ivory highlight */
  --hv2-ink: var(--ink, #18301E);              /* deep forest ink */
  --hv2-body: var(--text, #425244);            /* editorial body copy */
  --hv2-muted: #5F6F61;                        /* captions & metadata */
  --hv2-gold: #8C7234;                         /* Fraunces italic accent */
  --hv2-gold-soft: #F3E2B0;                    /* warm sun circle inside primary CTA */
  --hv2-green: var(--green, #4F8452);          /* botanical accent green */
  --hv2-leaf: var(--leaf, #8EAD69);            /* live indicator dot */
  --hv2-primary: var(--deep, #1F3D26);         /* primary button surface */
  --hv2-primary-hover: var(--deep2, #142A1A);  /* primary button hover */
  --hv2-line: var(--line, #E2DEC9);            /* warm architectural hairline */
  --hv2-line-soft: rgba(31, 61, 38, 0.09);     /* subtle card border */

  /* ---------- 3. TYPOGRAPHY ------------------------------------- */
  --hv2-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hv2-serif: Fraunces, Georgia, serif;

  --hv2-fs-h1: clamp(34px, 3.65vw, 56px);
  --hv2-lh-h1: 1.04;
  --hv2-fs-sub: clamp(15.5px, 1.18vw, 18px);
  --hv2-lh-sub: 1.55;
  --hv2-fs-btn: clamp(14.5px, 1vw, 15.5px);
  --hv2-fs-cap: clamp(12.5px, 0.9vw, 14px);

  /* ---------- 4. SPACING & SHAPE -------------------------------- */
  --hv2-radius-stage: 26px;
  --hv2-radius-card: 22px;
  --hv2-radius-dock: 18px;
  --hv2-radius-btn: 999px;
  --hv2-btn-h: clamp(48px, 5.4vh, 54px);

  /* ---------- 5. ELEVATION & MOTION ----------------------------- */
  --hv2-card-bg: rgba(255, 255, 255, 0.92);
  --hv2-card-shadow:
    0 20px 44px -24px rgba(18, 38, 24, 0.18),
    0 2px 6px rgba(18, 38, 24, 0.04);
  --hv2-stage-shadow:
    0 32px 64px -28px rgba(14, 32, 19, 0.34),
    0 6px 18px -6px rgba(14, 32, 19, 0.12);
  --hv2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hv2-slide-duration: 5200ms;
}