:root {
    --black: #000;
    --accentColor: #f28d02;
    --gray-light-super: #f2f2f2;
    --gray-light: #e2e2e2;
    --gray: #b1b1b1;
    --gray-dark: #787878;
    --gray-dark-super: #5b5b5b;
    --gray-dark-ultra: #2c2c2c;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--accentColor);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}

@font-face {
    font-family: "Lato";
    src: local("Lato"), url("../fonts/Lato/Lato-Regular.woff") format("woff"), url("../fonts/Lato/Lato-Regular.woff2") format("woff2"), url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "Lato";
    src: local("Lato"), url("../fonts/Lato/Lato-Bold.woff") format("woff"), url("../fonts/Lato/Lato-Bold.woff2") format("woff2"), url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: "Lato";
    src: local("Lato"), url("../fonts/Lato/Lato-Black.woff") format("woff"), url("../fonts/Lato/Lato-Black.woff2") format("woff2"), url('../fonts/Lato/Lato-Black.ttf') format('truetype');
    font-weight: 900;
}

@font-face {
    font-family: "BarlowCondensed";
    src: local("BarlowCondensed"), url("../fonts/Barlow/BarlowCondensed-Regular.woff") format("woff"), url("../fonts/Barlow/BarlowCondensed-Regular.woff2") format("woff2"), url('../fonts/Barlow/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: "BarlowCondensed";
    src: local("BarlowCondensed"), url("../fonts/Barlow/BarlowCondensed-SemiBold.woff") format("woff"), url("../fonts/Barlow/BarlowCondensed-SemiBold.woff2") format("woff2"), url('../fonts/Barlow/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: "BarlowCondensed";
    src: local("BarlowCondensed"), url("../fonts/Barlow/BarlowCondensed-Bold.woff") format("woff"), url("../fonts/Barlow/BarlowCondensed-Bold.woff2") format("woff2"), url('../fonts/Barlow/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
}

/*

-- gray

:root {
    --black: #000;
    --gray-light-super: #f2f2f2;
    --gray-light: #e2e2e2;
    --gray: #b1b1b1;
    --gray-dark: #787878;
    --gray-dark-super: #5b5b5b;
    --gray-dark-ultra: #2c2c2c;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--gray);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}

--pink
:root {
    --black: #000;
    --gray-light-super: #FFCCFF;
    --gray-light: #FF99FF;
    --gray: #FF00FF;
    --gray-dark: #CC00CC;
    --gray-dark-super: #660066;
    --gray-dark-ultra: #480048;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--gray);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}

    -- 
--red
:root {
    --black: #000;
    --gray-light-super: #ffcccc;
    --gray-light: #ff9999;
    --gray: #ff0000;
    --gray-dark: #cc0000;
    --gray-dark-super: #660000;
    --gray-dark-ultra: #480000;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--gray);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}

--same 
:root {
    --black: #000;
    --gray-light-super: #f2f2f2;
    --gray-light: #e2e2e2;
    --gray: #e2001a;
    --gray-dark: #787878;
    --gray-dark-super: #5b5b5b;
    --gray-dark-ultra: #2c2c2c;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--gray);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}

--green
:root {
    --black: #000;
    --gray-light-super: #CCFFCC;
    --gray-light: #99FF99;
    --gray: #66FF66;
    --gray-dark: #33CC33;
    --gray-dark-super: #009900;
    --gray-dark-ultra: #004800;
    --white: #fff;
    --btn1-backgroundcolor: var(--gray);
    --btn1-backgroundcolor-hover: var(--gray-dark-super);
    --btn1-border: none;
    --btn1-border-hover: none;
    --btn1-color: var(--white);
    --btn1-color-hover: var(--white);
    --btn1-padding: 10px 15px;
    --btn2-backgroundcolor: var(--gray-light);
    --btn2-backgroundcolor-hover: var(--gray-dark-super);
    --btn2-border: none;
    --btn2-border-hover: none;
    --btn2-color: var(--gray-dark);
    --btn2-color-hover: #fff;
    --btn2-padding: 10px 25px;
    --promo-background-color: var(--gray);
    --promo-color: var(--white);
    --cat-name-opacity: 0.7;
}
*/