/* Hero Section CSS Variables */

:root {
  /* Base background behind everything */
  --hero-bg: rgb(244, 245, 238);

  /* Overlay tint color (no alpha here; alpha is controlled separately) */
  --hero-overlay: rgb(52 73 94);

  /* Overlay strength (this is what you tweak to “see changes”) */
  --hero-overlay-opacity: 0.62;

  /* Typography */
  --hero-text: #ffffff;
  --hero-text-muted: rgba(255, 255, 255, 0.78);

  /* Accent */
  --hero-accent: #00ff66;

  /* “Wix-like” token (optional; here for familiarity) */
  --color_43: 52, 73, 94;

  /* Fluid typography scales */
  --hero-headline-xl: clamp(1.8rem, 5.2vw, 5.4rem);
  --hero-headline-sm: clamp(1.1rem, 2.0vw, 2.0rem);
  --hero-subtitle: clamp(0.7rem, 1.0vw, 1.05rem);
  --hero-one-liner: clamp(0.7rem, 0.95vw, 1.0rem);

  /* Layout */
  --hero-min-height: 100vh;

  /* Accent dots */
  --hero-dot-size: clamp(6px, 1.2vw, 15px);
}