/* ============================================================
   Solar Air Energy — design tokens (single source of truth)
   Brand values from the official Brand Design Guide v1.0 (June 2026);
   layout/rhythm tokens carried over from the /intro design system.
   Mirrored into theme.json for the block editor.
   ============================================================ */
:root {
    /* ---- Brand colour (Brand Guide is authoritative) ---- */
    --ds-green: #4CAF50;          /* Solar Green — primary / signature */
    --ds-green-light: #58B442;    /* lighter green (gradients) — alias of leaf */
    --ds-green-leaf: #58B442;     /* Leaf Green — CTA gradient top */
    --ds-green-deep: #43A03A;     /* gradient base / dark green */
    --ds-green-ink: #2E7D32;      /* deep green accent text */
    --ds-green-tint: #ECF5EC;     /* Mist Green surface */
    --ds-green-line: #DCEBDC;     /* mist border */
    --ds-highlight: #DDF0D2;      /* pale-green marker */

    --ds-orange: #EF8200;         /* Sun Orange — action */
    --ds-orange-dark: #D97400;

    --ds-ink: #1E2A26;            /* Charcoal Ink — headings (never pure black) */
    --ds-grey: #5C6660;           /* Slate Grey — body */
    --ds-grey-light: #828B86;     /* Slate Soft — captions/meta */

    --ds-surface: #ffffff;        /* Paper White */
    --ds-surface-2: #ECF5EC;      /* Mist zones (alternating sections) */
    --ds-bg: #eef1ee;
    --ds-line: #e6eae6;           /* hairline */

    --ds-gold: #fcae14;           /* legacy accent (ratings) */

    /* CTA gradient (Brand Guide) */
    --ds-grad-cta: linear-gradient(135deg, var(--ds-green-leaf), var(--ds-green-deep));
    /* Decorative stripe overlay — CTA band pseudo-element pattern */
    --ds-grad-stripe: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 46px);

    /* Semantic UI colours */
    --ds-white-92: rgba(255, 255, 255, 0.92);  /* glass-white text / chip background */
    --ds-error: #c0392b;                         /* error / danger state */

    /* ---- Typography (Brand Guide: Poppins display + Mulish body) ---- */
    --ds-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font: var(--ds-font-body); /* base body alias */

    --ds-fs-display: clamp(34px, 5vw, 54px);   /* hero — Poppins ExtraBold 800, -2% */
    --ds-fs-h1: clamp(26px, 3.4vw, 32px);      /* Poppins Bold 700 */
    --ds-fs-h2: clamp(22px, 2.4vw, 30px);      /* section titles — Poppins Bold 700 */
    --ds-fs-h3: clamp(18px, 1.4vw, 23px);      /* card titles */
    --ds-fs-lead: clamp(16px, 1.4vw, 18px);    /* section descriptions */
    --ds-fs-body: 16px;
    --ds-fs-eyebrow: 12px;                      /* uppercase, +14% tracking */
    --ds-lh-body: 1.6;
    --ds-lh-tight: 1.08;
    --ds-track-display: -0.02em;
    --ds-track-eyebrow: 0.14em;

    /* ---- Layout / rhythm (from /intro) ---- */
    --ds-container: 1200px;
    --ds-edge: clamp(16px, 4vw, 48px);
    --ds-section-py: clamp(40px, 5.5vw, 72px);
    --ds-nav-height: 96px;                       /* sticky header height — sticky top / scroll-margin offset */
    --ds-split-media: 3 / 2;                      /* left/right feature-split image aspect — consistent height product-wide */
    /* Breakpoints — fixed scale (native @media can't read var()). Use ONLY these three, nothing else:
       640px = phone · 768px = tablet · 1024px = nav switch / large. (210px is a documented ultra-narrow guard.) */

    /* ---- Radii / shadow / focus — fully-rounded brand ---- */
    --radius-pill: 999px;
    --radius-lg: 26px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --shadow-card: 0 8px 24px rgba(30, 42, 38, 0.06);
    --shadow-cta: 0 10px 22px -10px rgba(239, 130, 0, 0.8);
    /* Interaction tokens — one language: hover never lifts; it shifts colour or deepens shadow. */
    --shadow-hover: 0 18px 30px rgba(21, 28, 36, 0.20);
    --ds-ease: 0.18s ease;
    /* Card interaction (the /intro lift, now the global standard): cards rise + shadow on hover,
       their arrow goes orange + scales. Tokenised so every card shares one behaviour. */
    --ds-card-lift: -6px;
    --ds-card-ease: 0.25s ease;
    --ds-card-arrow-scale: 1.08;
    --ds-focus: 3px solid rgba(76, 175, 80, 0.55);

    /* ---- Spacing rhythm ---- */
    --space-2xs: 6px;
    --space-xs: 12px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
}