:root{
    /* color-scheme: light dark; */

    /* *** primitive colors *** */
    --color_gray: #CCCCCC;
    --color_gray_light: #E9EBF1;
    --color_gray_lightly: #FCFCFD;
    --color_gray_light_15: rgba(233, 235, 241, 0.15);
    --color_gray_light_25: rgba(233, 235, 241, 0.25);
    --color_gray_light_50: rgba(233, 235, 241, 0.5);
    --color_gray_blue: #3C5B87;
    --color_gray_blue_light: #6783AA;
    --color_gray_dark: #6C757D;
    --color_gray_dark_15: rgba(108, 117, 125, 0.15);
    --color_gray_dark_20: rgba(108, 117, 125, 0.2);
    --color_gray_dark_40: rgba(108, 117, 125, 0.4);
    --color_gray_deep_dark: #212529;

    --color_black: #000000;
    --color_white: #FFFFFF;

    --color_twuxtech: #F08F25;
    --color_twuxtech_gradient: -webkit-linear-gradient(rgba(240,132,36,1), rgba(243,172,32,1));

    --color_red: #DC3545;
    --color_red_20: rgba(220, 53, 69, 0.2);
    --color_red_40: rgba(220, 53, 69, 0.4);

    --color_green: #198740;
    --color_green_20: rgba(25, 135, 64, 0.2);
    --color_green_40: rgba(25, 135, 64, 0.4);

    --color_orange: #F0AD4E;
    --color_orange_20: rgba(240, 173, 78, 0.2);
    --color_orange_40: rgba(240, 173, 78, 0.4);

    --color_blue: #DBEAFF;

    --color_beige: #DBA576;

    
    /* *** Semantic Variables *** */
    /* Backgrounds*/
    --bg_primary: light-dark(var(--color_white), var(--color_gray_deep_dark));

    --bg_secondary: light-dark(var(--color_gray_light), var(--color_gray_dark));
    --bg_secondary_15: light-dark(var(--color_gray_light_15), var(--color_gray_dark_15));
    --bg_secondary_25: var(--color_gray_light_25);
    --bg_secondary_50: light-dark(var(--color_gray_light_50), var(--color_gray_light_25));

    --bg_darkGray: var(--color_gray_dark);
    --bg_darkGray20: var(--color_gray_dark_20);
    --bg_darkGray40: var(--color_gray_dark_40);

    --bg_highlight: light-dark(var(--color_gray_blue), var(--color_gray_blue_light));

    --bg_red: var(--color_red);
    --bg_red_20: var(--color_red_20);
    --bg_red_40: var(--color_red_40);

    --bg_orange: var(--color_orange);
    --bg_orange_20: var(--color_orange_20); 
    --bg_orange_40: var(--color_orange_40);

    --bg_green: var(--color_green);
    --bg_green_20: var(--color_green_20);
    --bg_green_40: var(--color_green_40);
    
    --bg_blue_light: var(--color_blue);
    --bg_modal: light-dark(#FCFCFD, #3F4247);
    
    /* Border */
    --border_color_light: light-dark(var(--color_gray), var(--color_gray_dark));
    --border_color_dark: light-dark(var(--color_gray_dark), var(--color_gray));
    --border_color_shadow: light-dark(#dddddd, var(--color_gray_light_25));
    --border_radius: 10px;
    --border_radius_small: 4px;
    --border_gradient_blue: -webkit-linear-gradient(left, var(--color_gray_light_15) 0%, var(--color_gray_blue) 50%, var(--color_gray_light_15) 100%);
    --border_gradient_gray: -webkit-linear-gradient(left, var(--color_gray_light_15) 0%, var(--border_color_light) 50%, var(--color_gray_light_15) 100%);

    /* Icons */
    --bg_icon_primary: light-dark(var(--color_gray_blue), var(--color_gray_blue_light));
    --bg_icon_primary_hover: light-dark(var(--color_gray_blue_light), var(--color_gray_blue));

    --bg_icon_primary_invert: var(--color_gray_blue_light);
    --bg_icon_primary_invert_hover: var(--color_gray_blue);

    --bg_icon_secondary: light-dark(var(--color_gray), var(--color_gray_dark));
    --bg_icon_secondary_hover: light-dark(var(--color_gray_dark), var(--color_gray));
    --bg_icon_passive: light-dark(var(--color_gray_light), var(--color_gray_dark));

    /* Text */
    --text_body: light-dark(var(--color_gray_deep_dark), var(--color_white));
    --text_body_invert: light-dark(var(--color_white), var(--color_gray_deep_dark));
    --text_subtitle: light-dark(var(--color_gray_dark), var(--color_gray));
    --text_highlight_twux: var(--color_twuxtech);
    --text_red: var(--color_red);
    --text_green: var(--color_green);
    --text_orange: var(--color_beige);
    --text_info: var(--color_gray_blue);
    --text_inactive: light-dark(var(--color_gray), var(--color_gray_light_25));
    --text_link: light-dark(var(--color_gray_blue_light), var(--color_gray_blue));
    --text_link_hover: light-dark(var(--color_gray_blue), var(--color_gray_blue_light));

    --text_size_title: 1rem;
    --text_size_body: 0.875rem;
    --text_size_small: 0.75rem;
    --text_size_button: 1rem;
    --text_size_breadcrumb: 0.875rem;

    /* Icon Size */
    --icon_size_small: 1rem;
    --icon_size_medium: 1.5rem;
    --icon_size_default: 2rem;

    /* Paddings */
    --padding_xsmall: 0.25rem;
    --padding_small: 0.5rem;
    --padding_medium: 0.75rem;
    --padding: 1rem;
    --padding_large: 2rem;
    --padding_xlarge: 4rem;
}