/* =========================================================
   VIP CAR ESTÉTICA AUTOMOTIVA
   Arquivo: variables.css

   Responsável por:
   - Cores da marca
   - Tipografia
   - Espaçamentos
   - Bordas
   - Sombras
   - Gradientes
   - Animações
   - Larguras
   - Z-index

   IMPORTANTE:
   Sempre que possível, altere valores visuais aqui.
   Assim mantemos o site inteiro padronizado.
========================================================= */

:root {

    /* =====================================================
       CORES PRINCIPAIS DA VIP CAR
    ===================================================== */

    --vip-blue: #1747b8;
    --vip-blue-dark: #0d2d7a;
    --vip-blue-light: #3d6ef2;

    --vip-gold: #d6a843;
    --vip-gold-light: #f0c65a;
    --vip-gold-dark: #a87b22;

    --vip-yellow: #ffd600;
    --vip-yellow-light: #ffe45c;


    /* =====================================================
       CORES DE FUNDO
    ===================================================== */

    --bg-primary: #03070d;
    --bg-secondary: #07101b;
    --bg-tertiary: #0a1523;

    --bg-card: #0b1624;
    --bg-card-hover: #101f31;

    --bg-header: rgba(3, 7, 13, 0.78);
    --bg-header-solid: #03070d;

    --bg-overlay: rgba(0, 0, 0, 0.62);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.78);


    /* =====================================================
       CORES DE TEXTO
    ===================================================== */

    --text-primary: #ffffff;
    --text-secondary: #d5dce7;
    --text-muted: #96a2b4;
    --text-dark: #090d13;

    --text-gold: var(--vip-gold-light);
    --text-yellow: var(--vip-yellow);


    /* =====================================================
       CORES AUXILIARES
    ===================================================== */

    --white: #ffffff;
    --black: #000000;

    --success: #22c55e;
    --success-dark: #169447;

    --danger: #ef4444;
    --warning: #f59e0b;

    --whatsapp: #25d366;
    --whatsapp-hover: #20bd5a;


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

    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-medium: rgba(255, 255, 255, 0.18);

    --border-gold: rgba(214, 168, 67, 0.55);
    --border-blue: rgba(61, 110, 242, 0.55);


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

    --gradient-brand:
        linear-gradient(
            135deg,
            var(--vip-gold-light) 0%,
            var(--vip-gold) 45%,
            var(--vip-gold-dark) 100%
        );

    --gradient-blue:
        linear-gradient(
            135deg,
            var(--vip-blue-light) 0%,
            var(--vip-blue) 50%,
            var(--vip-blue-dark) 100%
        );

    --gradient-background:
        linear-gradient(
            180deg,
            #03070d 0%,
            #07101b 50%,
            #03070d 100%
        );

    --gradient-card:
        linear-gradient(
            145deg,
            rgba(17, 32, 50, 0.88),
            rgba(6, 14, 24, 0.96)
        );

    --gradient-dark-transparent:
        linear-gradient(
            90deg,
            rgba(3, 7, 13, 0.98) 0%,
            rgba(3, 7, 13, 0.85) 45%,
            rgba(3, 7, 13, 0.30) 75%,
            rgba(3, 7, 13, 0.05) 100%
        );

    --gradient-bottom:
        linear-gradient(
            180deg,
            rgba(3, 7, 13, 0) 0%,
            rgba(3, 7, 13, 0.85) 70%,
            #03070d 100%
        );


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

    --font-primary:
        "Inter",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    --font-display:
        "Montserrat",
        "Inter",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;


    /* =====================================================
       PESOS DE FONTE
    ===================================================== */

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


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

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


    /* =====================================================
       ALTURA DE LINHA
    ===================================================== */

    --line-height-tight: 1.05;
    --line-height-heading: 1.15;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;


    /* =====================================================
       ESPAÇAMENTO ENTRE LETRAS
    ===================================================== */

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.08em;
    --letter-spacing-wider: 0.14em;
    --letter-spacing-ultra: 0.20em;


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

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;


    /* =====================================================
       CONTAINER
    ===================================================== */

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

    --container-padding: 24px;


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

    --header-height: 82px;

    --header-height-mobile: 70px;


    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 44px;

    --radius-pill: 999px;

    --radius-circle: 50%;


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

    --shadow-sm:
        0 4px 14px rgba(0, 0, 0, 0.18);

    --shadow-md:
        0 12px 30px rgba(0, 0, 0, 0.28);

    --shadow-lg:
        0 24px 60px rgba(0, 0, 0, 0.40);

    --shadow-xl:
        0 36px 90px rgba(0, 0, 0, 0.55);

    --shadow-gold:
        0 0 30px rgba(214, 168, 67, 0.20);

    --shadow-gold-strong:
        0 0 42px rgba(214, 168, 67, 0.38);

    --shadow-blue:
        0 0 35px rgba(61, 110, 242, 0.24);

    --shadow-whatsapp:
        0 10px 35px rgba(37, 211, 102, 0.25);


    /* =====================================================
       BLUR
    ===================================================== */

    --blur-sm: 6px;
    --blur-md: 12px;
    --blur-lg: 22px;
    --blur-xl: 40px;


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

    --transition-fast: 160ms ease;
    --transition-normal: 280ms ease;
    --transition-slow: 450ms ease;

    --transition-smooth:
        500ms cubic-bezier(0.22, 1, 0.36, 1);

    --transition-bounce:
        600ms cubic-bezier(0.34, 1.56, 0.64, 1);


    /* =====================================================
       ESCALAS DE INTERAÇÃO
    ===================================================== */

    --scale-hover: 1.025;
    --scale-button-hover: 1.04;
    --scale-button-active: 0.97;


    /* =====================================================
       OPACIDADE
    ===================================================== */

    --opacity-disabled: 0.45;
    --opacity-muted: 0.70;
    --opacity-overlay: 0.80;


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

    --z-base: 1;
    --z-content: 10;
    --z-overlay: 20;
    --z-header: 100;
    --z-dropdown: 200;
    --z-floating: 500;
    --z-modal: 1000;
    --z-loader: 2000;


    /* =====================================================
       TAMANHOS DE ÍCONES
    ===================================================== */

    --icon-xs: 14px;
    --icon-sm: 18px;
    --icon-md: 22px;
    --icon-lg: 28px;
    --icon-xl: 36px;


    /* =====================================================
       BOTÕES
    ===================================================== */

    --button-height: 54px;

    --button-padding-x: 26px;
    --button-padding-y: 14px;


    /* =====================================================
       CARDS
    ===================================================== */

    --card-padding: 28px;

    --card-border:
        1px solid var(--border-subtle);


    /* =====================================================
       SEÇÕES
    ===================================================== */

    --section-padding:
        clamp(80px, 8vw, 130px);

    --section-padding-small:
        clamp(60px, 6vw, 90px);


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

    --heading-hero:
        clamp(3rem, 6vw, 6.5rem);

    --heading-section:
        clamp(2rem, 4vw, 4rem);

    --heading-card:
        clamp(1.25rem, 2vw, 1.6rem);


    /* =====================================================
       PARÁGRAFOS RESPONSIVOS
    ===================================================== */

    --paragraph-large:
        clamp(1rem, 1.4vw, 1.25rem);

    --paragraph-normal:
        clamp(0.95rem, 1.1vw, 1.05rem);
}


/* =========================================================
   TELAS MENORES
========================================================= */

@media (max-width: 768px) {

    :root {

        --container-padding: 20px;

        --card-padding: 22px;

        --button-height: 52px;

        --section-padding:
            clamp(64px, 12vw, 90px);

        --section-padding-small:
            clamp(50px, 10vw, 70px);
    }
}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 480px) {

    :root {

        --container-padding: 16px;

        --card-padding: 20px;

        --header-height-mobile: 66px;

        --button-padding-x: 22px;
    }
}