:root {
    /* ===== Color ===== */
    --color-primary: #2E2C7E;
    --color-primary-700: #1E1D52;
    --color-primary-800: #14133A;
    --color-primary-500: #5B58FC;
    --color-primary-100: #DDE0FF;
    --color-primary-50: #EEF0FF;

    --color-accent: #FFB627;
    --color-accent-600: #E69E0F;
    --color-accent-100: #FFEBC2;

    --color-whatsapp: #25D366;
    --color-whatsapp-600: #1FB658;

    --color-bg: #FFFFFF;
    --color-bg-alt: #F5F7FA;
    --color-bg-dark: #0B0E1A;
    --color-surface: #FFFFFF;

    --color-text: #0B0E1A;
    --color-text-soft: #2A2E3F;
    --color-text-muted: #5A6172;
    --color-text-on-dark: #F5F7FA;
    --color-text-on-dark-muted: #B6BACA;

    --color-border: #E5E7EF;
    --color-border-strong: #C9CCDB;

    /* ===== Typography ===== */
    --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.875rem;
    --fs-4xl: 2.25rem;
    --fs-5xl: 3rem;
    --fs-6xl: 3.75rem;
    --fs-7xl: 4.5rem;

    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ===== Spacing (4px base) ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ===== Layout ===== */
    --container-max: 1200px;
    --container-pad: 1.5rem;
    --section-pad-y: 6rem;

    /* ===== Radius ===== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ===== Shadow ===== */
    --shadow-xs: 0 1px 2px rgba(11, 14, 26, 0.05);
    --shadow-sm: 0 2px 6px rgba(11, 14, 26, 0.06);
    --shadow-md: 0 6px 18px rgba(11, 14, 26, 0.08);
    --shadow-lg: 0 16px 40px rgba(11, 14, 26, 0.12);
    --shadow-xl: 0 24px 60px rgba(11, 14, 26, 0.16);
    --shadow-glow-primary: 0 12px 32px rgba(46, 44, 126, 0.25);
    --shadow-glow-accent: 0 12px 32px rgba(255, 182, 39, 0.30);

    /* ===== Motion ===== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ===== Z-index — escala documentada =====
       0   base                  conteúdo normal da página
       10  raised                cards em hover
       40  floating              botão flutuante (WhatsApp)
       50  sticky                cabeçalho fixo
       90  overlay               backdrop do menu/modal
       100 modal                 gaveta do menu / modais
       110 modal-controls        botões dentro/sobre o modal (X de fechar)
       200 toast                 notificações
    */
    --z-base: 0;
    --z-raised: 10;
    --z-floating: 40;
    --z-sticky: 50;
    --z-overlay: 90;
    --z-modal: 100;
    --z-modal-controls: 110;
    --z-toast: 200;
}

@media (max-width: 768px) {
    :root {
        --section-pad-y: 4rem;
        --container-pad: 1rem;
    }
}