:root {

  /* ─── Farben ─── */
  --background-primary:   #FAF9F6;
  --background-secondary: #F5F5F5;
  --text-primary:         #1A1A1A;
  --text-secondary:       #666666;
  --accent-primary:       #9327C3;
  --accent-secondary:     #BC83D7;
  --border-subtle:        #E8E8E8;

  /* ─── Typografie-Skala ─── */
  --font-hero-headline:    clamp(2rem, 5vw, 3.75rem);
  --font-section-headline: clamp(1.75rem, 3.5vw, 2.5rem);
  --font-subsection:       clamp(1.25rem, 2vw, 1.5rem);
  --font-body:             clamp(1rem, 1.2vw, 1.125rem);
  --font-caption:          0.875rem;
  --font-label:            0.75rem;

  /* ─── Spacing ─── */
  --section-padding-y:    clamp(80px, 10vw, 120px);
  --container-max-width:  1200px;
  --container-padding-x:  clamp(24px, 4vw, 48px);
  --card-padding:         clamp(24px, 3vw, 48px);
  --card-radius:          20px;
  --button-radius:        8px;

  /* ─── Schatten ─── */
  --shadow-card:       0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 40px rgba(0, 0, 0, 0.14);

  /* ─── Animationen ─── */
  --transition-base:        200ms ease-in-out;
  --transition-slow:        400ms ease-out;
  --transition-scroll-fade: 900ms cubic-bezier(0.45, 0, 0.55, 1);
}