:root {
  --plum: #6d4c7d;
  --peach: #ffb38a;
  --teal: #37c6b6;
  --gold: #f2c14e;
  --cream: #fff6e9;
  --cocoa: #5a463a;
  --lavender: #dccef9;
  --berry: #d96c8f;
  --mint: #a8f0d1;
  --sunset: #ff8c61;
  --sky: #9ed8ff;

  --gradient-hero: linear-gradient(
    118deg,
    var(--plum) 0%,
    #8b6a9a 38%,
    var(--teal) 72%,
    var(--gold) 100%
  );
  --gradient-cta: linear-gradient(105deg, var(--gold) 0%, var(--sunset) 100%);
  --gradient-panel: linear-gradient(
    160deg,
    rgba(255, 246, 233, 0.98) 0%,
    rgba(220, 206, 249, 0.85) 100%
  );

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-accent: "Unbounded", system-ui, sans-serif;

  --space-xs: clamp(0.45rem, 1vw, 0.65rem);
  --space-sm: clamp(0.7rem, 1.4vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.6rem, 3vw, 2.4rem);
  --space-xl: clamp(2.4rem, 5vw, 4rem);
  --space-2xl: clamp(3.5rem, 7vw, 6rem);

  --clip-diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --clip-angle: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
  --clip-notch: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%);

  --border-thick: 3px solid var(--plum);
  --shadow-elevate: 0 18px 50px rgba(109, 76, 125, 0.18);
  --shadow-soft: 0 8px 28px rgba(90, 70, 58, 0.1);

  --header-h: 4.25rem;
  --container: min(76rem, 94vw);
  --transition: 0.32s cubic-bezier(0.25, 0.8, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0.01ms;
  }
}