/* =====================================================
   VIAJALEA DESIGN SYSTEM v1
===================================================== */

/* =====================================================
   COLORS
===================================================== */

:root{

    --vz-primary:#082B5B;

    --vz-accent:#FCAA27;

    --vz-purple:#7F26E2;

    --vz-turquoise:#00BCD4;

    --vz-white:#FFFFFF;

}

/* =====================================================
   BACKGROUNDS
===================================================== */

:root{

    --vz-bg-soft:#F3F4F6;

    --vz-bg:#F8FAFC;
    
    --vz-surface:#F8FAFC;

}

/* =====================================================
   BORDERS
===================================================== */

:root{

    --vz-border-width:1px;

    --vz-border-color:#E5E7EB;

    --vz-border-style:solid;

    --vz-border-light:#D1D5DB;

    --vz-border-blue:#E8F4FD;

    --vz-border:#E5E7EB;

}

/* =====================================================
   TEXT COLORS
===================================================== */

:root{

    --vz-text-light:#6B7280;

    --vz-text-dark:#111827;

    --vz-text:#545454;

}

/* =====================================================
   TYPOGRAPHY
===================================================== */

html,
body{

    font-family:'Montserrat',sans-serif;

}

/* Desktop */

:root{

    --vz-font-xs:10px;
    --vz-font-sm:12px;
    --vz-font-md:13px;
    --vz-font-lg:14px;
    --vz-font-xl:16px;
    --vz-font-2xl:18px;
    --vz-font-3xl:22px;

}

/* =====================================================
   SPACING
===================================================== */

/* Desktop */

:root{

    --vz-space-xs:4px;
    --vz-space-sm:6px;
    --vz-space-md:8px;
    --vz-space-lg:12px;
    --vz-space-xl:16px;
    --vz-space-2xl:20px;

}

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

/* Desktop */

:root{

    --vz-radius-xs:4px;
    --vz-radius-sm:6px;
    --vz-radius-md:8px;
    --vz-radius-lg:12px;
    --vz-radius-pill:999px;

}

/* =====================================================
   CONTAINERS
===================================================== */

:root{

    --vz-container-max-width:1600px;

    --vz-container-padding:16px;

    --vz-container-gap:16px;

}

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

:root{

    --vz-card-padding:12px;

    --vz-card-gap:12px;

}

/* =====================================================
   CHIPS
===================================================== */

:root{

    --vz-chip-padding-y:8px;

    --vz-chip-padding-x:14px;

    --vz-chip-font-size:12px;

}

/* =====================================================
   INPUTS
===================================================== */

:root{

    --vz-input-height:40px;

    --vz-input-font-size:13px;

    --vz-input-padding-x:10px;

}

/* =====================================================
   BUTTONS
===================================================== */

:root{

    --vz-button-height:40px;

    --vz-button-font-size:13px;

    --vz-button-padding-x:16px;

}

/* =====================================================
   SHADOWS
===================================================== */

:root{

    --vz-shadow-sm:0 2px 8px rgba(0,0,0,.06);

    --vz-shadow-md:0 4px 12px rgba(0,0,0,.10);

    --vz-shadow-lg:0 10px 30px rgba(0,0,0,.12);

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1024px){

    :root{

        --vz-font-xs:10px;
        --vz-font-sm:11px;
        --vz-font-md:12px;
        --vz-font-lg:13px;
        --vz-font-xl:14px;
        --vz-font-2xl:16px;
        --vz-font-3xl:20px;

        --vz-space-xs:4px;
        --vz-space-sm:6px;
        --vz-space-md:8px;
        --vz-space-lg:10px;
        --vz-space-xl:12px;
        --vz-space-2xl:16px;

        --vz-radius-xs:4px;
        --vz-radius-sm:6px;
        --vz-radius-md:8px;
        --vz-radius-lg:10px;
        --vz-radius-pill:999px;

        --vz-container-padding:12px;
        --vz-container-gap:12px;

        --vz-card-padding:10px;
        --vz-card-gap:10px;

        --vz-chip-padding-y:7px;
        --vz-chip-padding-x:12px;
        --vz-chip-font-size:11px;

        --vz-input-height:38px;
        --vz-input-font-size:12px;
        --vz-input-padding-x:8px;

        --vz-button-height:38px;
        --vz-button-font-size:12px;
        --vz-button-padding-x:14px;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:767px){

    :root{

        --vz-font-xs:9px;
        --vz-font-sm:10px;
        --vz-font-md:11px;
        --vz-font-lg:12px;
        --vz-font-xl:13px;
        --vz-font-2xl:15px;
        --vz-font-3xl:18px;

        --vz-space-xs:2px;
        --vz-space-sm:4px;
        --vz-space-md:6px;
        --vz-space-lg:8px;
        --vz-space-xl:10px;
        --vz-space-2xl:12px;

        --vz-radius-xs:4px;
        --vz-radius-sm:5px;
        --vz-radius-md:6px;
        --vz-radius-lg:8px;
        --vz-radius-pill:999px;

        --vz-container-padding:8px;
        --vz-container-gap:8px;

        --vz-card-padding:8px;
        --vz-card-gap:8px;

        --vz-chip-padding-y:6px;
        --vz-chip-padding-x:10px;
        --vz-chip-font-size:10px;

        --vz-input-height:36px;
        --vz-input-font-size:11px;
        --vz-input-padding-x:8px;

        --vz-button-height:36px;
        --vz-button-font-size:11px;
        --vz-button-padding-x:12px;

    }

}