:root {
  --color-brand: #807dab;
  --color-brand-strong: #625d8f;
  --color-brand-deep: #39346f;
  --color-brand-soft: #d7d4f7;
  --color-accent: #e98272;
  --color-accent-soft: #fecdc6;
  --color-text: #39364f;
  --color-text-muted: #5d596d;
  --color-background: #fffcfb;
  --color-background-alt: #f7f5fb;
  --color-surface: #ffffff;
  --color-border: #e7e2ec;
  --color-white: #ffffff;
  --color-focus: #39364f;

  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-small: 0.875rem;
  --font-size-body: clamp(1rem, 1.1vw, 1.0625rem);
  --font-size-h1: clamp(2.35rem, 10vw, 4rem);
  --font-size-h2: clamp(1.75rem, 6vw, 2.75rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.375rem);
  --line-height-body: 1.65;
  --line-height-heading: 1.12;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-26: 104px;

  --container-max: 1120px;
  --page-gutter: 20px;
  --section-space: clamp(64px, 7vw, 104px);
  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-light: 0 14px 40px rgb(57 54 79 / 0.07);
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 32px;
  }
}