/* ==========================================================
   PALU EVENTOS
   VARIABLES.CSS
   Design System Global
   ========================================================== */

:root {

    /* ======================================================
       CORES BASE
       ====================================================== */

    --color-black: #030609;
    --color-black-soft: #070c12;

    --color-dark: #0a1018;
    --color-dark-2: #0d1520;

    --color-white: #ffffff;
    --color-off-white: #f4f5f7;

    --color-text: #f5f7fa;
    --color-text-soft: #b7bec8;
    --color-text-muted: #7e8997;

    --color-border:
        rgba(255, 255, 255, 0.12);

    --color-border-strong:
        rgba(255, 255, 255, 0.22);


    /* ======================================================
       IDENTIDADE PALU
       ====================================================== */

    --palu-blue: #2388ff;
    --palu-blue-light: #5ba7ff;
    --palu-blue-dark: #0759c7;

    --palu-red: #ed1c2e;
    --palu-red-light: #ff4050;
    --palu-red-dark: #a90918;

    --palu-pink: #ef2468;


    /* ======================================================
       GRADIENTES
       ====================================================== */

    --gradient-palu:
        linear-gradient(
            90deg,
            var(--palu-blue) 0%,
            var(--palu-blue-light) 38%,
            var(--palu-pink) 68%,
            var(--palu-red) 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            rgba(3, 6, 9, 0) 0%,
            rgba(3, 6, 9, 0.75) 60%,
            #030609 100%
        );

    --gradient-hero:
        linear-gradient(
            90deg,
            rgba(3, 6, 9, 0.98) 0%,
            rgba(3, 6, 9, 0.88) 28%,
            rgba(3, 6, 9, 0.42) 58%,
            rgba(3, 6, 9, 0.12) 100%
        );


    /* ======================================================
       TIPOGRAFIA
       ====================================================== */

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Montserrat",
        "Inter",
        sans-serif;


    /* PESOS */

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;


    /* ======================================================
       TAMANHOS DE TEXTO
       ====================================================== */

    --text-xs: 0.72rem;
    --text-sm: 0.82rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.35rem;
    --text-xl: 1.75rem;


    /* ======================================================
       TÍTULOS RESPONSIVOS
       ====================================================== */

    --title-sm:
        clamp(2rem, 4vw, 3rem);

    --title-md:
        clamp(2.6rem, 5vw, 4.6rem);

    --title-lg:
        clamp(3.5rem, 7vw, 7rem);


    /* ======================================================
       LAYOUT
       ====================================================== */

    --container-width: 1440px;
    --container-wide: 1680px;

    --page-padding:
        clamp(24px, 5vw, 80px);


    /* ======================================================
       ESPAÇAMENTOS
       ====================================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --section-space:
        clamp(90px, 10vw, 170px);


    /* ======================================================
       BORDAS
       ====================================================== */

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;


    /* ======================================================
       SOMBRAS
       ====================================================== */

    --shadow-soft:
        0 20px 60px
        rgba(0, 0, 0, 0.28);

    --shadow-deep:
        0 30px 100px
        rgba(0, 0, 0, 0.55);

    --shadow-blue:
        0 0 60px
        rgba(35, 136, 255, 0.15);

    --shadow-red:
        0 0 60px
        rgba(237, 28, 46, 0.12);


    /* ======================================================
       TRANSIÇÕES
       ====================================================== */

    --transition-fast:
        180ms
        cubic-bezier(.2, .8, .2, 1);

    --transition:
        350ms
        cubic-bezier(.2, .8, .2, 1);

    --transition-slow:
        700ms
        cubic-bezier(.16, 1, .3, 1);


    /* ======================================================
       HEADER
       ====================================================== */

    --header-height: 92px;


    /* ======================================================
       Z-INDEX
       ====================================================== */

    --z-base: 1;
    --z-content: 10;
    --z-header: 100;
    --z-menu: 200;
    --z-whatsapp: 300;
    --z-modal: 500;

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    :root {

        --header-height: 78px;

        --page-padding:
            clamp(20px, 4vw, 48px);

        --section-space:
            clamp(75px, 9vw, 120px);

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    :root {

        --header-height: 70px;

        --page-padding: 20px;

        --section-space: 72px;

        --title-lg:
            clamp(2.8rem, 14vw, 4.5rem);

        --title-md:
            clamp(2.2rem, 10vw, 3.4rem);

        --title-sm:
            clamp(1.8rem, 8vw, 2.6rem);

    }

}


/* ==========================================================
   MOBILE PEQUENO
   ========================================================== */

@media (max-width: 420px) {

    :root {

        --page-padding: 18px;

        --header-height: 66px;

        --section-space: 64px;

    }

}