:root {
  /* Figma colors */
  --green: #84b545;
  --cream: #f2efe9;
  --gray: #565656;
  --white: #ffffff;

  /* Figma layout (1728px artboard) */
  --design-w: 1728;
  --content-w: 1428px;
  --gutter: 150px;
  --nav-h: 54px;
  /* Brand corner — same curve as navbar / buttons, shared sitewide */
  --radius: 40px;
  --nav-radius: var(--radius);
  --card-radius: var(--radius);
  --img-radius: var(--radius);
  --btn-radius: var(--radius);
  --cta-radius: 120px;
  --footer-radius: 180px;
  --input-radius: var(--radius);

  /* Typography */
  --font-display: "Send Flowers", cursive;
  --font-body: "Poppins", sans-serif;

  --shadow-display: 5px 5px 10px rgba(86, 86, 86, 0.75);
  /* Ombra grigia su testo bianco in hero (effetto drop shadow multiply) */
  --shadow-hero-photo: 1px 2px 4px rgba(86, 86, 86, 0.82), 0 3px 10px rgba(86, 86, 86, 0.48);
  --shadow-text: 0 4px 4px rgba(0, 0, 0, 0.4);
  --shadow-text-strong: 3px 3px 6.5px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);

  --glass-bg: linear-gradient(
    180deg,
    rgba(242, 239, 233, 0.01) 0%,
    rgba(242, 239, 233, 0.03) 100%
  );
  --glass-bg-strong: linear-gradient(
    180deg,
    rgba(242, 239, 233, 0.1) 0%,
    rgba(242, 239, 233, 0.3) 100%
  );
  --card-hover-gradient: linear-gradient(0deg, #84b545 0%, rgba(132, 181, 69, 0) 100%);

  /* Responsive breakpoints (align with JS catalog reveal) */
  --bp-sm: 640px;
  --bp-md: 1100px;
  --bp-lg: 1400px;
}

@media (max-width: 1400px) {
  :root {
    --gutter: 96px;
  }
}

@media (max-width: 1100px) {
  :root {
    --gutter: 64px;
    --side-padding: 1.5rem;
    --cta-radius: 80px;
    --footer-radius: 120px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 40px;
    --side-padding: 1.75rem;
    --cta-radius: 48px;
    --footer-radius: 72px;
    --nav-h: 48px;
  }
}