/************************************************************
************ Encanto Café Store Custom Variables ************
************************************************************/
:root {
    /** Device Sizes **/
    --width: 1140px;
    --quarter: 25%;
    --half: 50%;
    --full: 100%;
    --wfixed: 1440px;
    --s-spacing: 1rem;
    --m-spacing: 2rem;
    --l-spacing: 3rem;
    --xl-spacing: 4rem;
    --xxl-spacing: 5rem;
    --xxxl-spacing: 6rem;
    --padding: 0;
    --padding-full: var(--l-spacing) 0;
    --square: 0;
    --round: 80px;

    /* Colors */
    --cyan: #45E2D9;
    --red: #ff3b3b;
    --green: #88b04b;
    --grey: #F2F2F2;
    --dark: #333333;
    --gray: #666666;
    --soft-gray: #f4f4f4;
    --soft-border: #e4e4e4;

    /* Shadows */
    --text-shadow: 5px 5px 5px rgba(51,51,51,.5);
    --box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
    --box-shadow-alt: 0px -10px 10px rgba(0, 0, 0, 0.25);

    /*** Fonts ***/
    /* Families */
    --allura: 'Allura', cursive;
    --palmer: 'PalmerLakeScript', cursive;
    --poppins: 'Poppins', sans-serif;
    /* Font Sizes */
    --heroh: 11rem;
    --h1: clamp(2.5rem, 6vw, 4rem);
    --h2: clamp(2.25rem, 5vw, 3.5rem);
    --h3: clamp(2rem, 4vw, 3rem);
    --h4: clamp(1.75rem, 3vw, 2.5rem);
    --h5: clamp(1.5rem, 2vw, 1.75rem);
    --h6: clamp(1.25rem, 1.5vw, 1.5rem);
    --text-xs: clamp(0.625rem, 1vw, 0.75rem);
    --text-sm: clamp(0.75rem, 1.2vw, 0.875rem);
    --text-base: clamp(0.875rem, 1.4vw, 1rem);
    --text-md: clamp(1rem, 1.6vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.8vw, 1.25rem);
    --text-xl: clamp(1.25rem, 2vw, 1.5rem);
    --text-2xl: clamp(1.375rem, 2.2vw, 1.75rem);
    --text-3xl: clamp(1.5rem, 2.5vw, 2rem);
    /* Line heights */
    --lh: 1em;
    --lh-1: 1.1em;
    --lh-2: 1.2em;
    --lh-3: 1.3em;
    --lh-4: 1.4em;
    --lh-5: 1.5em;
    --lh-l: 2em;
    --lh-n: .5em;
    /* Font weight */
    --thin: 100;
    --extralight: 200;
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black: 900;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    :root {
        /** Device Sizes **/
        --width: 1080px;
        --wfixed: 1140px;
        /* Font Sizes */
        --heroh: 8rem;
    }
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    :root{
        /** Device Sizes **/
        --width: var(--full);
        --wfixed: var(--full);
        --padding: 0 2rem;
        --padding-full: var(--m-spacing);
        /* Font Sizes */
        --heroh: 6rem;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: var(--lh-2);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    :root{
        /** Device Sizes **/
        --width: var(--full);
        --padding: 0 1rem;
        --padding-full: var(--m-spacing) var(--s-spacing);
        /* Font Sizes */
        --heroh: 4.5rem;
    }
}