:root {
  --color-bg: #fff9f1;
  --color-surface: #ffffff;
  --color-surface-soft: #fff4dd;
  --color-ink: #202b3f;
  --color-muted: #667085;
  --color-line: rgba(32, 43, 63, .10);
  --color-primary: #ec008c;
  --color-secondary: #47c6dc;
  --color-yellow: #ffc719;
  --color-green: #7fc40d;
  --color-danger: #d92d20;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-card: 0 10px 24px rgba(32, 43, 63, .08);
  --shadow-hover: 0 18px 38px rgba(32, 43, 63, .13);
  --shadow-panel: 0 14px 34px rgba(32, 43, 63, .10);
  --font-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", "Nunito Sans", system-ui, sans-serif;
  --step-xs: .76rem;
  --step-sm: .88rem;
  --step-base: 1rem;
  --step-md: 1.15rem;
  --step-lg: clamp(1.35rem, 2vw, 1.65rem);
  --step-xl: clamp(2rem, 4vw, 3rem);
  --step-hero: clamp(3rem, 8vw, 6rem);
}