/* ============================================================
   DESIGN SYSTEM — Juli & Arne Wedding Rave
   Festival poster aesthetic · Warm palette · Flat design
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-bg:               #EFE2C8;
  --color-accent-soft:      #F194A9;
  --color-cta:              #ED6C71;
  --color-secondary-warm:   #F18660;
  --color-primary:          #FCC249;
  --color-highlight:        #FFE454;
  --color-contrast-cool:    #53BBB1;
  --color-contrast-cool-alt:#7089C0;
  --color-text:             #5C3A30;
  --color-text-muted:       #7A5548;
  --color-outline:          #7C4F49;

  /* ── Typography ── */
  --font-display:   'Playfair Display', serif;
  --font-body:      'Nunito', sans-serif;
  --font-heading:   'Space Grotesk', sans-serif;

  --fs-hero:        clamp(3rem, 8vw, 7rem);
  --fs-h1:          clamp(2rem, 5vw, 3.5rem);
  --fs-h2:          clamp(1.5rem, 3.5vw, 2.5rem);
  --fs-h3:          clamp(1.2rem, 2.5vw, 1.75rem);
  --fs-body:        clamp(1rem, 1.8vw, 1.2rem);
  --fs-small:       clamp(0.85rem, 1.4vw, 1rem);
  --fs-caption:     clamp(0.75rem, 1.2vw, 0.875rem);

  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  --ls-tight:       0.02em;
  --ls-normal:      0.06em;
  --ls-wide:        0.12em;
  --ls-extra-wide:  0.2em;
  --ls-poster:      0.25em;

  --lh-tight:       1.1;
  --lh-normal:      1.5;
  --lh-relaxed:     1.7;

  /* ── Spacing ── */
  --space-xs:       clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm:       clamp(0.5rem, 1vw, 0.75rem);
  --space-md:       clamp(1rem, 2vw, 1.5rem);
  --space-lg:       clamp(1.5rem, 3vw, 2.5rem);
  --space-xl:       clamp(2rem, 5vw, 4rem);
  --space-2xl:      clamp(3rem, 7vw, 6rem);
  --space-3xl:      clamp(4rem, 10vw, 8rem);

  /* ── Radii ── */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-pill:    50px;
  --radius-round:   50%;

  /* ── Motion ── */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:  150ms;
  --duration-normal:300ms;
  --duration-slow:  500ms;

  /* ── Layout ── */
  --max-width:      1200px;
  --content-width:  min(90%, var(--max-width));
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}