:root {
  /* ── Primary Brand Colors ─────────────────────────── */
  --color-baby-pink:       #FADADD;   /* Baby Pink — primary */
  --color-baby-pink-mid:   #F5AEBA;   /* Deeper pink for accents */
  --color-baby-pink-dark:  #E07F96;   /* Dark pink for CTAs */
  --color-aqua:            #A8E6E2;   /* Aqua — secondary */
  --color-aqua-mid:        #6BCFC8;   /* Deeper aqua */
  --color-aqua-dark:       #3DB8AF;   /* CTA aqua */

  /* ── Neutrals ─────────────────────────────────────── */
  --color-white:           #FFFFFF;
  --color-off-white:       #FAFAFA;
  --color-surface:         #FEF7F8;   /* warm near-white */
  --color-muted:           #F5EEF0;   /* dividers / bg chips */
  --color-charcoal:        #2D2428;   /* main text */
  --color-text-mid:        #5C4550;   /* subheadings */
  --color-text-light:      #9B8490;   /* captions / meta */

  /* Legacy aliases (hero and other components use these) */
  --color-cloud-cream:     var(--color-surface);
  --color-blush-petal:     var(--color-baby-pink-mid);
  --color-sage-whisper:    var(--color-aqua);
  --color-warm-apricot:    var(--color-aqua-dark);
  --color-charcoal-plum:   var(--color-charcoal);
  --color-warm-taupe:      #C9B8AE;

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Fraunces', serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5625rem;   /* 25px */
  --text-2xl:  1.9375rem;   /* 31px */
  --text-3xl:  2.4375rem;   /* 39px */
  --text-4xl:  3.0625rem;   /* 49px */
  --text-5xl:  3.8125rem;   /* 61px */

  /* Line Heights */
  --leading-body:    1.6;
  --leading-display: 1.15;

  /* ── Spacing (Base 8px) ───────────────────────────── */
  --space-1:  0.5rem;    /* 8px  */
  --space-2:  1rem;      /* 16px */
  --space-3:  1.5rem;    /* 24px */
  --space-4:  2rem;      /* 32px */
  --space-5:  2.5rem;    /* 40px */
  --space-6:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-10: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */
  --space-16: 8rem;      /* 128px */

  /* Section Rhythm */
  --section-spacing-mobile:  var(--space-6);
  --section-spacing-tablet:  var(--space-8);
  --section-spacing-desktop: var(--space-10);

  /* ── Radius ───────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────── */
  --shadow-soft:  0 4px 24px rgba(45, 36, 40, 0.08);
  --shadow-hover: 0 12px 40px rgba(45, 36, 40, 0.14);
  --shadow-pink:  0 8px 32px rgba(224, 127, 150, 0.25);
  --shadow-aqua:  0 8px 32px rgba(61, 184, 175, 0.22);
}