/* ============================================================
   De Baar Trucks — Design System (residue layer)

   Colors + fonts now live NATIVELY in Astra Global Colors (Customizer)
   and Elementor Global Colors/Typography (Site Settings) — see
   CLAUDE.md §9 for the palette slot map. Base palette, body font, and
   the heading/eyebrow/label/CTA/reveal helper classes were REMOVED
   2026-07-23 (plan Tasks 13/14, "trim to residue"): the native Astra +
   Elementor bindings already reproduce them at higher CSS specificity,
   verified against the live rendered cascade. What remains below is
   ONLY what Astra Free / Elementor Free genuinely cannot do natively.

   RELATIONSHIP TO THE CUSTOM BLOCKS:
     blocks/hero.html is SELF-CONTAINED: it re-declares its own scoped
     tokens (incl. its own `h1 em` / `.rv-eyebrow` italic-accent rules,
     scoped under .rv-hero) and ships its own CSS, so it still works
     even if this file is missing.
   ============================================================ */

/* Fonts (Montserrat for headings and labels, as in the logo; Inter for body text) are self-hosted by Elementor and Astra (local Google Fonts) — no remote @import. */

/* residue after native-hybrid conversion (2026-07-23): colors/fonts now
   live in Astra + Elementor globals; these are the only pieces
   Free-tier cannot express natively. */
::selection{ background:var(--ast-global-color-0); color:var(--ast-global-color-4); }

/* Accent word inside a display heading: <em> renders as the italic
   serif in the accent colour (the signature treatment of this design). */
.rv-display em, .elementor-widget.rv-display .elementor-heading-title em{ font-style:italic; color:var(--ast-global-color-0); }

/* Muted lead paragraph — no "muted" global color SLOT exists (CLAUDE.md
   §9 derives alpha via color-mix(), not a static swatch a widget could
   bind to), so this is genuine Free-tier residue.
   IMPORTANT (verified 2026-07-23): the widget WRAPPER ties in
   specificity with Elementor's kit-wide `.elementor-widget-text-editor
   {color:var(--e-global-color-text)}` default (#7A7A7A), which loads
   AFTER this stylesheet in the document — a bare `.rv-lead{color}`
   alone would LOSE that tie and the <p> would inherit #7A7A7A. So the
   color declaration also targets `.rv-lead p` directly (one extra
   element selector => (0,1,1), unconditionally higher specificity than
   the kit's (0,1,0), regardless of load order) to guarantee the muted
   color. Checked against all 5 rv-lead widgets: 4 of them (home,
   inkoop, over-ons, verkocht) have a bare <p> with no inline color of
   its own and rely on this; Voorraad's already carries an inline
   color so is unaffected either way. Font-size/line-height/margin-top
   stay on the wrapper only (as before — they were never applied to
   the <p> directly and are inherited/independent respectively). */
.rv-lead, .rv-lead p{ color:color-mix(in srgb, var(--ast-global-color-2) 55%, transparent); }
.rv-lead{ font-size:16px; line-height:1.9; margin-top:26px; }
.rv-lead a{ color:var(--ast-global-color-0); text-decoration:none; }
.rv-lead a:hover{ color:var(--ast-global-color-2); }