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

:root {
    /* Colores (marca Caramés Mediación) */
    --primary: #3D65DF;
    --secondary: #D6CCEE;
    --complementary-1: #E35F38;
    --complementary-2: #FFC629;

    --primary-light: #5A7DE6;
    --primary-dark: #2F51BC;
    --secondary-light: #E6E0F5;
    --secondary-dark: #B9ABDF;

    --black: #1D1D1C;
    --dark-grey: #494946;
    --grey: #8C8C88;
    --light-grey: #F7F5EE;
    --white: #FCFCFC;

    /* Tamaños de texto */
    --h1: 6.5rem;
    /* 104px */
    --h2: 4rem;
    /* 64px */
    --h3: 2.625rem;
    /* 42px */
    --h4: 1.75rem;
    /* 28px */
    --h5: 1.5rem;
    /* 24px */
    --h6: 1.25rem;
    /* 20px */

    --p-xl: 1.5rem;
    /* 24px */
    --p-l: 1.25rem;
    /* 20px */
    --p-m: 1rem;
    /* 16px */
    --p-s: 0.75rem;
    /* 12px */

    --a-nav: 1rem;
    /* 16px */
    --a-btn: 1.125rem;
    /* 18px */
    --p-featured: 1.25rem;
    /* 20px */

    /* Fuentes*/
    --font-titles: 'Instrument Serif', serif;
    --font-text: 'Inter', sans-serif;
    --font-decorative: 'Instrument Serif', serif;

    /* Espaciados */
    --size-xs: 8px;
    --size-s: 24px;
    --size-m: 36px;
    --size-l: 64px;
    --size-xl: 104px;
    --size-xxl: 164px;

    --lateral-pad: 2rem;
    --section-pad: 104px;
    --section-pad-s: 64px;

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

    /* 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: 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: 1rem;

        --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: 34px;
        --size-xl: 54px;

        --section-pad: 54px;
        --section-pad-s: 34px;
    }

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