:root {
  /* Colors */
  --color-bg:       #FAFAF8;
  --color-text:     #1A1410;
  --color-muted:    #7A6F68;
  --color-pink:     #FF2D87;
  --color-pink-hover: #E0196E;
  --color-yellow:   #FFD600;
  --color-cream:    #FFF5E4;
  --color-border:   #E8E3DE;
  --color-white:    #FFFFFF;

  /* Typography */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Font sizes — fluid */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 3vw, 2.25rem);
  --text-4xl:  clamp(2rem, 4vw, 3rem);
  --text-hero: clamp(3rem, 7vw, 5.5rem);
  --text-stat: clamp(2.5rem, 5vw, 4rem);
  --text-step: 5rem;

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

  /* Layout */
  --container-max: 1440px;
  --container-pad: clamp(16px, 2.5vw, 40px);

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(26,20,16,0.06), 0 4px 16px rgba(26,20,16,0.04);
}