:root {
  /* ─── Colors: Primary ─── */
  --color-primary-100: #e4c3e2;
  --color-primary-300: #a33e88;
  --color-primary-500: #5e0049;
  --color-primary-900: #23001f;

  /* ─── Colors: Neutral ─── */
  --color-neutral-0:   #ffffff;
  --color-neutral-100: #d6dbdf;
  --color-neutral-700: #4a5258;
  --color-neutral-900: #2f3438;
  --color-black:       #000000;

  /* ─── Colors: Dark cards (Section-2) ─── */
  --color-card-dark-1: #1e1e1e;
  --color-card-dark-2: #1f1f1f;

  /* ─── Typography: Font families ─── */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ─── Typography: Sizes ─── */
  --font-size-h1:      4.5rem;    /* 72px */
  --font-size-h2:      3.5rem;    /* 56px */
  --font-size-h4:      2.125rem;  /* 34px */
  --font-size-h5:      1.625rem;  /* 26px */
  --font-size-lead:    1.25rem;   /* 20px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-md:      1rem;      /* 16px */
  --font-size-sm:      0.875rem;  /* 14px */
  --font-size-xs:      0.75rem;   /* 12px */

  /* ─── Typography: Weights ─── */
  --font-weight-regular:   400;
  --font-weight-heading:   500;
  --font-weight-semibold:  600;

  /* ─── Typography: Line heights ─── */
  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.5;

  /* ─── Typography: Letter spacing ─── */
  --letter-spacing-overline: 0.1em;

  /* ─── Spacing ─── */
  --spacing-4:   0.25rem;   /*  4px */
  --spacing-8:   0.5rem;    /*  8px */
  --spacing-12:  0.75rem;   /* 12px */
  --spacing-16:  1rem;      /* 16px */
  --spacing-24:  1.5rem;    /* 24px */
  --spacing-32:  2rem;      /* 32px */
  --spacing-40:  2.5rem;    /* 40px */
  --spacing-48:  3rem;      /* 48px */
  --spacing-64:  4rem;      /* 64px */
  --spacing-80:  5rem;      /* 80px */
  --spacing-112: 7rem;      /* 112px */

  /* ─── Layout ─── */
  --page-max-width: 1280px;
  --page-padding:   4rem;   /* 64px */

  /* ─── Borders / Radius ─── */
  --radius-sm:     0.5rem;    /*  8px */
  --radius-card:   1rem;      /* 16px */
  --radius-pill:   3.125rem;  /* 50px */

  /* ─── Shadows ─── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 3rem;
    --font-size-h2: 2rem;
    --font-size-h4: 1.75rem;
    --font-size-h5: 1.5rem;
  }
}