:root {
    --msf-blue: #006b96;
    --msf-blue-dark: #005273;
    --msf-green: #187a2f;
    --msf-green-dark: #115b23;
    --msf-text: #172c3a;
    --msf-text-muted: #52616b;
    --msf-background: #faf9f5;
    --msf-white: #ffffff;
    --msf-dirty-white: #faf5f5;
    --msf-border: #d6dfdf;
    --msf-blue-tint: #eaf3f8;
    --msf-green-tint: #edf5e9;
    --msf-surface-green: #dfeeda;
    --msf-surface-blue: #dcecf4;
    --msf-surface-dark: var(--msf-blue-dark);

    --msf-surface-warm: radial-gradient(ellipse at 12% 15%, #fffefa 0%, transparent 42%), radial-gradient(ellipse at 88% 80%, #dcebd7 0%, transparent 58%), linear-gradient(130deg, #fffdf7 0%, #f7f5ec 48%, #e5eee0 100%);
    --msf-surface-light-green: radial-gradient(ellipse at 15% 18%, #f7fbf3 0%, transparent 43%), radial-gradient(ellipse at 88% 82%, #c8e1c3 0%, transparent 58%), linear-gradient(130deg, #f1f7ed 0%, #e4f0df 48%, #d4e8cf 100%);
    --msf-surface-light-blue: radial-gradient(ellipse at 15% 18%, #f5fbfd 0%, transparent 43%), radial-gradient(ellipse at 88% 82%, #bddde8 0%, transparent 58%), linear-gradient(130deg, #edf7fa 0%, #dceef4 48%, #c9e4ed 100%);
    --msf-surface-brand: radial-gradient(ellipse at 15% 20%, rgba(64, 157, 190, 0.72) 0%, transparent 52%), radial-gradient(ellipse at 85% 80%, rgba(67, 151, 81, 0.68) 0%, transparent 54%), linear-gradient(130deg, #075979 0%, #176f87 38%, #277c6b 65%, #28763b 100%);

    --msf-content-width: 1260px;
    --msf-section-space: 5rem;

    --msf-space-xs: 0.5rem;
    --msf-space-sm: 0.75rem;
    --msf-space-md: 1rem;
    --msf-space-lg: 1.5rem;
    --msf-space-xl: 2rem;
    --msf-space-2xl: 3rem;
    --msf-space-3xl: 4.5rem;

    --msf-radius: 0.5rem;
    --msf-radius-card: 1rem;
    --msf-radius-panel: 1.125rem;
    --msf-radius-pill: 100rem;

    --msf-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --msf-font-heading: Georgia, "Times New Roman", serif;
    --msf-font-size-small: 0.875rem;
    --msf-font-size-body: 1rem;
    --msf-font-size-lead: 1.125rem;
    --msf-font-size-h3: clamp(1.35rem, 2vw, 1.75rem);
    --msf-font-size-h2: clamp(2rem, 4vw, 3.25rem);
    --msf-font-size-display: clamp(2.75rem, 6vw, 5.25rem);
}

@media (max-width: 48rem) {
    :root {
        --msf-section-space: 4rem;
    }
}

@media (max-width: 30rem) {
    :root {
        --msf-section-space: 3.5rem;
    }
}