/**
 * Témini — variables de diseño (:root)
 */

:root {
    /* Colores */
    --primary: #101010;
    --secondary: #343539;
   
	--black: #101010;
    --dark-grey: #343539;
    --grey: #6B6B6B;
    --light-grey: #E9E9E9;
    --white: #FCFCFC;

    /* Tamaños de texto */
    --h1: 3rem;
    --h2: 1.5rem;
    --h3: 2.25rem;
    --h4: 1.75rem;
    --h5: 1.5rem;
    --h6: 1.25rem;

    --p-xl: 1.5rem;
    --p-l: 1.25rem;
    --p-m: 1rem;
    --p-s: 0.75rem;

    --a-nav: 1.125rem;
    --a-btn: 1.125rem;
    --p-featured: 4.5rem;

    /* Fuentes*/
    --font-titles: 'Poppins', sans-serif;
    --font-text: 'Poppins', sans-serif;
    --font-decorative: 'Poppins', serif;

    /* Espaciados */
    --size-xs: 8px;
    --size-s: 16px;
    --size-m: 24px;
    --size-ml: 29px;
    --size-mxl:36px;
    --size-mxxl:64px;
    --size-l: 88px;
    --size-xl: 120px;
    --size-xxl: 220px;

    --lateral-pad: 64px;
    --section-pad: 220px;
    --section-pad-s: 88px;

    /* Radius */
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 36px;
    --radius-button:8px;

    /* Medidas útiles */
    --container-width: 1920px;
    --half-section: min(calc(var(--container-width) / 2), calc(50dvw - var(--lateral-pad)));
    --admin-bar-height: 32px;

    /* Otros */
    --cookie-button-size: 40px;
    --cookie-button-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --cookie-button-radius: 6px;

    /* Responsive */
    @media only screen and (max-width: 1439px) {
        --p-featured: 4rem;
    }
    @media only screen and (max-width: 1239px) {  
        --container-width: 100%;
    }
    
    @media only screen and (max-width: 959px) {
        
    }
    
    @media only screen and (max-width: 782px) {
        --admin-bar-height: 46px;
    }
    
    @media only screen and (max-width: 767px) {
        --lateral-pad: 20px;

        --container-width: 767px;

        --cookie-button-size: 30px;
    }
    
    @media only screen and (max-width: 480px) {
        --size-xs: 6px;
        --size-s: 12px;
        --size-m: 24px;
        --size-l: 44px;
        --size-xl: 60px;
        --size-xxl: 110px;
        --p-featured: 3rem;
    
        --section-pad: 110px;
        --section-pad-s: 60px;
    }

    /* Scrollbar */
    scrollbar-color: var(--primary) var(--white);
    scrollbar-width: thin;
}