/* Dotof — Gradient palette. Intentional addition: the brief specifies flat
   color everywhere except the hero background image. These four gradients
   formalize the *one* place gradients are allowed — hero/section backgrounds
   and dark scrims — built strictly from existing brand colors. Never use on
   buttons, cards, inputs, or text backgrounds; those stay flat per brief. */

:root {
  /* Dawn — Butter → Sky. Warm-to-cool diagonal; the most "optimistic" pairing.
     Use for: hero backgrounds, celebratory/launch moments, top-of-funnel marketing sections. */
  --gradient-dawn: linear-gradient(135deg, #F0B84D 0%, #86ACF8 100%); /* @kind color */

  /* Growth — Olive → Sky. Pairs the two "action" accents; reads as progress/trust.
     Use for: feature-section dividers, secondary marketing backgrounds, progress/growth visuals. */
  --gradient-growth: linear-gradient(135deg, #7B8D3D 0%, #86ACF8 100%); /* @kind color */

  /* Calm — Sky → Pistachio. Cool, low-contrast, closest to the neutral palette.
     Use for: soft section backgrounds behind text-heavy content, secondary hero variants. */
  --gradient-calm: linear-gradient(135deg, #86ACF8 0%, #DFE6C3 100%); /* @kind color */

  /* Depth — Pine → Olive. The only dark gradient; low-key, not decorative.
     Use for: scrims/overlays over hero photography so white text stays readable —
     never as a standalone decorative background. */
  --gradient-depth: linear-gradient(160deg, #20231A 0%, #3A4326 100%); /* @kind color */
}