:root {
    /* main colors */
    --white: #FFF;
    --extra-light: #f0f0f0;
    --light: #FEFEFE;
    --white-gray: #f8f8f8;
    --light-gray: #E6E6E6;
    --gray: #dcdcdc;
    --gray-highlight: #cfcfcf;
    --dark-gray: #DBDBDB;
    --ex-dark-gray: #b0b0b0;
    --white-blue: #EAF2F6;
    --light-blue: #DCEAF7;
    --blue-pale: #7894A3;
    --active-light: var(--light-blue);
    --active-lighter: #D4E4EB;
    --active: #61A2D0;
    --active-highlight: #2F709E;
    --active-dark: #56758B;
    
    /* text colors */
    --t-primary: #1E1E1E;
    --t-secondary: #444;
    --t-gray: #777;
    --black: #000;

    /* error colors */
    --light-red: #f9eceb;
    --red: #D32F2F;
    --green: #008000;

    /* font sizes */
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-xxl: 20px;
    --fs-3xl: 22px;

    /* transitions */
    --tr-fast: .1s;
    --tr-base: .2s;
    --tr-slow: .3s;


    /* tables */
    --table-border: var(--light-gray);
    --table-header-bg: var(--active);
    --table-text: var(--t-primary);

    /* grid */
    --grid-border: var(--light-gray);
    --grid-header-bg: var(--active-dark);
    --grid-header-bg-hover: var(--active-highlight);
    --grid-row-bg-hover: var(--active-lighter);
    --grid-icon: var(--active-dark);

    /* input, textarea, options */
    --input-bg: var(--white);
    --input-border: var(--light-gray);
    --input-text: var(--t-primary);
    --input-fs: var(--fs-md);
    --input-shadow: inset 0 0 4px var(--active);
    --input-box: var(--active-dark);

    /* buttons */
    --btn-primary-bg: var(--white-blue);
    --btn-primary-bg-hover: var(--active-light);
    --btn-primary-text: var(--t-primary);
    --btn-primary-text-hover: var(--t-primary);
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--active-light);
    --btn-secondary-text: var(--t-primary);
    --btn-secondary-text-hover: var(--t-primary);
    --btn-secondary-icon: var(--active-dark);
    --btn-secondary-icon-hover: var(--active);
    --btn-fs: var(--fs-md);

    /* link */
    --link: var(--active);
    --link-hover: var(--active-highlight);
    --calendar: var(--active-dark);

    /* tab-link */
    --tab: var(--t-primary);
    --tab-hover: var(--active-dark);
    --spiner-stroke: var(--active-dark);
    --bagge: var(--active-dark);
}

html[data-theme="FrenchRacingBlue"] {
    /* main colors */
    --white: #FFF;
    --light: #FEFEFE;
    --white-gray: #f8f8f8;
    --light-gray: #E6E6E6;
    --gray: #dcdcdc;
    --gray-highlight: #cfcfcf;
    --dark-gray: #DBDBDB;
    --ex-dark-gray: #b0b0b0;
    --white-blue: #EAF2F6;
    --light-blue: #DCEAF7;
    --blue-pale: #7894A3;
    --active-light: var(--light-blue);
    --active-lighter: #D4E4EB;
    --active: #0f5e98;
    --active-highlight: #588fb8;
    --active-dark: #56758B;

    /* text colors */
    --t-primary: #1E1E1E;
    --t-secondary: #444;
    --t-gray: #777;
    --black: #000;

    /* error colors */
    --light-red: #f9eceb;
    --red: #D32F2F;
    --green: #008000;

    /* font sizes */
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-xxl: 20px;
    --fs-3xl: 22px;

    /* transitions */
    --tr-fast: .1s;
    --tr-base: .2s;
    --tr-slow: .3s;

    /* tables */
    --table-border: var(--light-gray);
    --table-header-bg: var(--active);
    --table-text: var(--t-primary);

    /* grid */
    --grid-border: var(--light-gray);
    --grid-header-bg: var(--active);
    --grid-header-bg-hover: var(--active-highlight);
    --grid-row-bg-hover: var(--active-lighter);
    --grid-icon: var(--active-dark);

    /* input, textarea, options */
    --input-bg: var(--white);
    --input-border: var(--light-gray);
    --input-text: var(--t-primary);
    --input-fs: var(--fs-md);
    --input-shadow: inset 0 0 4px var(--active);
    --input-box: var(--active);

    /* buttons */
    --btn-primary-bg: var(--active);
    --btn-primary-bg-hover: var(--active-highlight);
    --btn-primary-text: var(--white);
    --btn-primary-text-hover: var(--white);
    --btn-secondary-bg: transparent;
    --btn-secondary-bg-hover: var(--active-highlight);
    --btn-secondary-text: var(--t-primary);
    --btn-secondary-text-hover: var(--white);
    --btn-secondary-icon: var(--active);
    --btn-secondary-icon-hover: var(--white);
    --btn-fs: var(--fs-md);

    /* link */
    --link: var(--active);
    --link-hover: var(--active-highlight);
    --calendar: var(--active);

    /* tab-link */
    --tab: var(--t-primary);
    --tab-hover: var(--active);
    --spiner-stroke: var(--active);
    --bagge: var(--active);
}