:root {
    --container-wide: 1480px;
    --container-max: 1260px;
    --container-md: 1099px;
    --container-sm: 976px;

    --section-radius: 72px;
    --section-overlap: 72px;
    --section-padding-y: 3rem;

    --header-height: 64px;
    --banner-height: 32px;

    --color-primary: #2E7B85;
    --color-surface: #ffffff;
    --color-page: #f8f8f8;
    --color-muted: rgba(0, 0, 0, 0.75);
    --color-border: rgba(0, 0, 0, 0.12);

    --color-brand: #198754;
    --color-brand-dark: #14633f;
    --color-brand-pink: #cc0769;
    --color-link: #198754;
    --color-action: #cc071e;

    --color-accent-bg: #e6f2f1;
    --color-accordion-bg: rgba(34, 120, 110, 0.10);
    --color-accordion-body-bg: #f6f6f6;

    --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08);

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 9999px;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Roboto Slab', 'Inter', system-ui, sans-serif;
}

@media (max-width: 768px) {
    :root {
        --section-radius: 34px;
        --section-overlap: 34px;
        --section-padding-y: 2.5rem;
    }
}