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

:root {
    /* Colores */
    --primary: #141414;
    --secondary: #292929;
    --complementary-1: #832B2A;

	--black: #141414;
    --dark-grey: #292929;
    --grey: #93928A;
    --light-grey: #D7D5CB;
    --white: #EBEAE5;

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

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

    --a-nav: 0.875rem;
    --a-btn: 0.875rem;
    --p-featured: 3rem;

    /* Fuentes*/
    --font-titles: 'Cabinet Grotesk', sans-serif;
    --font-text: 'Cabinet Grotesk', sans-serif;
    --font-decorative: 'Zalando Sans Expanded', sans-serif;

    /* Espaciados */
    --size-xxxs: .5rem; /* 8px */
    --size-xxs: .75rem; /* 12px */
    --size-xs: 1rem; /* 16px */
    --size-s: 1.5rem; /* 24px */
    --size-m: 2.25rem; /* 36px */
    --size-l: 3.25rem; /* 52px */
    --size-xl: 4rem; /* 64px */
    --size-xxl: 7.5rem; /* 120px */
    --size-xxxl: 15rem; /* 240px */

    --lateral-pad: 64px;
    --section-pad: 7.5rem; /* 120px */
    --section-pad-s: 4rem; /* 64px */

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

    /* 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: 32px;
    --cookie-button-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --cookie-button-radius: 6px;
    --cookie-button-background: var(--primary);
    --cookie-button-color: var(--white);

    --cookie-button-gap: 6px;

    /* Responsive */
    @media only screen and (max-width: 1239px) {
        --container-width: 940px;
    }

    @media only screen and (max-width: 959px) {
        --container-width: 708px;
    }

    @media only screen and (max-width: 782px) {
        --admin-bar-height: 46px;
    }

    @media only screen and (max-width: 767px) {
        --lateral-pad: 24px;

        --container-width: 767px;

        --cookie-button-size: 24px;
    }

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