/****************************************************************************************************

    User CSS

    This is the user CSS theme configuration file. Here you can change the predefined values of each
    CSS varaible in order to customize the site.

    ================================================================================================

    NOTE! 

    When assigning colors the values MUST be in RGB format and only the channel values. Otherwise 
    opacity levels will break across the theme.

    Write color values like this:

    --colors-xxx: 255 255 255;

    Not like this:

    --color-xxx: rgb(255 255 255);
    --color-xxx: #FFFFFF;
    --color-xxx: FFFFFF;

    ================================================================================================

    If you would like to add more complex classes you can do that like you normaly would within this 
    file. Add these below the "root" statement. The CSS variables can be used in these if you like. 
    
    Example below:

    .my-class {
        color: var(--colors-white);
    }


****************************************************************************************************/

:root {
/* --colors-white: 255 255 255; */
/* --colors-gray--lightest: 244 244 245; */
/* --colors-gray--light: 228 228 231; */
/* --colors-gray: 113 113 122; */
/* --colors-gray--dark: 39 39 42; */
/* --colors-gray--darkest: 9 9 11; */
/* --colors-green: 34 197 94; */
/* --colors-green--dark: 22 163 74; */
/* --width-logo: 130px; */
/* --width-logo--small: 110px; */
/* --bordercolor: var(--colors-gray--light); */
/* --radius-modal: 0.375rem; */
/* --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); */
/* --text-body: var(--colors-gray--darkest); */
/* --bg-body: var(--colors-white); */
/* --text-header--top: var(--colors-white); */
/* --bg-header--top: var(--colors-gray--darkest); */
/* --text-header--main: var(--colors-gray--darkest); */
/* --bg-header--main: var(--colors-white); */
/* --bordercolor-header--main: var(--colors-gray--light); */
/* --radius-input: 0.375rem; */
/* --bg-input: var(--colors-white); */
/* --bordercolor-input: var(--colors-gray--light); */
/* --radius-input--search: 9999px; */
/* --bg-input--search: var(--colors-gray--lightest); */
/* --bordercolor-input--search: var(--colors-gray--lightest); */
/* --radius-button: 9999px; */
/* --text-button--default: var(--colors-gray--darkest); */
/* --bg-button--default: var(--colors-gray--lightest); */
/* --bg-button--default---hover: var(--colors-gray--light); */
/* --text-button--primary: var(--colors-white); */
/* --bg-button--primary: var(--colors-gray--darkest); */
/* --bg-button--primary---hover: var(--colors-gray--dark); */
/* --text-button--buy: var(--colors-white); */
/* --bg-button--buy: var(--colors-green); */
/* --bg-button--buy---hover: var(--colors-green--dark); */
}