:root {
  --color-background: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fbff;
  --color-text: #0f172a;
  --color-text-muted: #5b6472;
  --color-accent: #0057b8;
  --color-accent-strong: #0a2f6b;
  --color-accent-soft: rgba(0, 87, 184, 0.12);
  --color-border: rgba(10, 47, 107, 0.12);
  --color-success: #2c6f4f;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.5rem;
  --spacing-6: 2rem;
  --spacing-7: 3rem;
  --spacing-8: 5rem;
  --spacing-9: 6rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --shadow-sm: 0 10px 30px rgba(11, 20, 36, 0.08);
  --shadow-md: 0 20px 45px rgba(11, 20, 36, 0.12);
  --container-width: min(1280px, calc(100% - 2rem));
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.95rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: clamp(2rem, 4vw, 3.25rem);
  --font-size-3xl: clamp(2.75rem, 5vw, 4.25rem);
  --type-page-title-size: clamp(2.4rem, 4.3vw, 4.2rem);
  --type-page-title-experiment-size: clamp(1.8rem, 3.2vw, 3.1rem);
  --type-page-title-weight: 800;
  --type-brand-hero-title-size: clamp(2.1rem, 3.6vw, 3.4rem);
  --type-page-title-line-height: 1.04;
  --type-page-title-letter-spacing: -0.03em;
  --type-hero-lead-size: 1.05rem;
  --type-section-label-size: var(--font-size-xs);
  --type-section-title-size: clamp(1.7rem, 3vw, 2.3rem);
  --type-section-title-line-height: 1.2;
  --type-section-intro-size: var(--font-size-md);
  --type-body-size: var(--font-size-md);
  --type-body-line-height: 1.7;
  --type-card-title-size: 1.15rem;
  --type-button-size: var(--font-size-md);
  --type-button-line-height: 1.2;
  --type-cta-title-size: clamp(1.8rem, 3.4vw, 2.6rem);
  --type-cta-title-line-height: 1.1;
  --content-width-hero: 620px;
  --content-width-page-hero-experiment: 670px;
  --content-width-intro: 760px;
  --content-width-reading: 72ch;
  --section-space-compact: var(--spacing-6);
  --section-space-standard: clamp(1.4rem, 3.1vw, 2.2rem);
  --section-space-featured: clamp(4.25rem, 8vw, 5rem);
  --section-space-hero-start: 1.1rem;
  --section-space-hero-end: 0.9rem;
  --section-space-first-start: 0.9rem;
  --section-space-first-end: 0.4rem;
  --section-header-gap: var(--spacing-6);
  --section-content-gap: var(--spacing-4);
}

@media (min-width: 768px) {
  :root {
    --section-space-hero-start: 1.2rem;
    --section-space-hero-end: 0.95rem;
  }
}