/* ---------------------------------------------------------------------------- */
/* old-design */
/* ---------------------------------------------------------------------------- */

:host, :root {
    --col_jhs_old_prime_violett_400: #5b175a;
    /* black */
    --col_jhs_old_sec_black_800: #222222;
    --col_jhs_old_sec_black_880: #1f1f1f;
    --col_jhs_old_sec_black_900: #171717;

    /* yellow */
    --col_jhs_old_sec_yellow_400: #e8ec52;
    --col_jhs_old_sec_yellow_500: #c1c50f;
    --col_jhs_old_sec_yellow_900: #5f6003;

    --col_jhs_old_sec_red_400: #ff7575;
    --col_jhs_old_sec_red_500: #fd3b3b;
    --col_jhs_old_sec_red_700: #c72c1d;
}




/* ---------------------------------------------------------------------------- */
/* new-design */
/* ---------------------------------------------------------------------------- */

:host, :root {
    /* violett */
    --col_jhs_prime_violett_200: rgb(220, 210, 226);
    --col_jhs_prime_violett_400: rgb(172, 146, 185);
    --col_jhs_prime_violett_600: rgb(124, 82, 143);
    --col_jhs_prime_violett_800: rgb(92, 40, 116);
        --col_jhs_prime_violett_800_80: rgba(92, 40, 116, 0.8);
        --col_jhs_prime_violett_800_50: rgba(92, 40, 116, 0.5);
        --col_jhs_prime_violett_800_20: rgba(92, 40, 116, 0.2);

    /* white */
    --col_jhs_prime_white_800: rgba(255, 255, 255, 1.0);
        --col_jhs_prime_white_800_80: rgba(255, 255, 255, 0.8);
        --col_jhs_prime_white_800_50: rgba(255, 255, 255, 0.5);
        --col_jhs_prime_white_800_20: rgba(255, 255, 255, 0.2);

    /* gray */
    --col_jhs_sec_gray_200: rgb(249, 249, 250);
    --col_jhs_sec_gray_400: rgb(242, 243, 243);
    --col_jhs_sec_gray_600: rgb(236, 236, 236);
    --col_jhs_sec_gray_800: rgba(217, 217, 214, 1.0);
        --col_jhs_sec_gray_800_80: rgba(217, 217, 214, 0.8);
        --col_jhs_sec_gray_800_50: rgba(217, 217, 214, 0.5);
        --col_jhs_sec_gray_800_20: rgba(217, 217, 214, 0.2);

    /* black */
    --col_jhs_sec_black_700: rgba(94, 94, 93, 1.0);
    --col_jhs_sec_black_750: rgba(70, 70, 70, 1.0);
    --col_jhs_sec_black_800: rgba(29, 29, 27, 1.0);
        --col_jhs_sec_black_800_80: rgba(29, 29, 27, 0.8);
        --col_jhs_sec_black_800_50: rgba(29, 29, 27, 0.5);
        --col_jhs_sec_black_800_20: rgba(29, 29, 27, 0.2);

    /* green */
    --col_jhs_sec_green_200: rgb(202, 236, 233);
    --col_jhs_sec_green_400: rgb(126, 211, 201);
    --col_jhs_sec_green_600: rgb(51, 187, 171);
    --col_jhs_sec_green_800: rgba(0, 171, 151, 1.0);
        --col_jhs_sec_green_800_80: rgba(0, 171, 151, 0.8);
        --col_jhs_sec_green_800_50: rgba(0, 171, 151, 0.5);
        --col_jhs_sec_green_800_20: rgba(0, 171, 151, 0.2);

    /* blue */
    --col_jhs_sec_blue_200: rgb(202, 234, 247);
    --col_jhs_sec_blue_400: rgb(126, 205, 237);
    --col_jhs_sec_blue_600: rgb(51, 178, 228);
    --col_jhs_sec_blue_800: rgb(0, 160, 222);
        --col_jhs_sec_blue_800_80: rgba(0, 160, 222, 0.8);
        --col_jhs_sec_blue_800_50: rgba(0, 160, 222, 0.5);
        --col_jhs_sec_blue_800_20: rgba(0, 160, 222, 0.2);

    /* yellow */
    --col_jhs_sec_yellow_200: rgb(253, 245, 213);
    --col_jhs_sec_yellow_400: rgb(253, 232, 152);
    --col_jhs_sec_yellow_600: rgb(253, 220, 90);
    --col_jhs_sec_yellow_800: rgba(255, 213, 49, 1.0);
        --col_jhs_sec_yellow_800_80: rgba(255, 213, 49, 0.8);
        --col_jhs_sec_yellow_800_50: rgba(255, 213, 49, 0.5);
        --col_jhs_sec_yellow_800_20: rgba(255, 213, 49, 0.2);
    --col_jhs_sec_yellow_900: rgba(204, 170, 40, 1.0);
    --col_jhs_sec_yellow_1000: rgba(128, 107, 25, 1.0);
    --col_jhs_sec_yellow_1100: rgba(53, 45, 17, 1.0);

    /* red */
    --col_jhs_sec_red_200: rgb(247, 202, 228);
    --col_jhs_sec_red_400: rgb(238, 126, 189);
    --col_jhs_sec_red_600: rgb(229, 51, 149);
    --col_jhs_sec_red_800: rgba(255, 0, 123);
        --col_jhs_sec_red_800_80: rgba(255, 0, 123, 0.8);
        --col_jhs_sec_red_800_50: rgba(255, 0, 123, 0.5);
        --col_jhs_sec_red_800_20: rgba(255, 0, 123, 0.2);

}


/* ---------------------------------------------------------------------------- */
/* line height */
/* ---------------------------------------------------------------------------- */
:host, :root {
	--ld_font_family: "PT Sans", "Trebuchet MS", sans-serif;
    font-family: var(--ld_font_family);
}


/* NOTE(lm): USE THESE VARIABLES PROXIES - not the raw color variables */
:host, :root {
    /* colors */
    --ld_col_black_200: #333333;
    --ld_col_black_200_txt: White;
    --ld_col_black_400: var(--col_jhs_old_sec_black_800);
    --ld_col_black_400_txt: White;
    --ld_col_black_600: var(--col_jhs_old_sec_black_880);
    --ld_col_black_600_txt: White;
    --ld_col_black_800: var(--col_jhs_old_sec_black_900);
    --ld_col_black_800_txt: White;

    --ld_col_white_200: White;
    --ld_col_white_200_txt: var(--col_jhs_old_sec_black_800);
    --ld_col_white_400: White;
    --ld_col_white_400_txt: var(--col_jhs_old_sec_black_800);
    --ld_col_white_600: LightGrey;
    --ld_col_white_600_txt: var(--col_jhs_old_sec_black_800);
    --ld_col_white_800: Grey;
    --ld_col_white_800_txt: var(--col_jhs_old_sec_black_800);

    --ld_col_primary_200: var(--col_jhs_sec_yellow_400);
    --ld_col_primary_200_txt: var(--ld_col_black_400);
    --ld_col_primary_400: var(--col_jhs_sec_yellow_600);
    --ld_col_primary_400_txt: var(--ld_col_black_400);
    --ld_col_primary_600: var(--col_jhs_sec_yellow_800);
    --ld_col_primary_600_txt: var(--ld_col_black_400);
    --ld_col_primary_800: var(--col_jhs_sec_yellow_1100);
    --ld_col_primary_800_txt: var(--ld_col_black_400);

    --ld_col_secondary_200: var(--col_jhs_prime_violett_400);
    --ld_col_secondary_200_txt: var(--ld_col_black_400);
    --ld_col_secondary_400: var(--col_jhs_prime_violett_800);
    --ld_col_secondary_400_txt: var(--ld_col_white_400);
    --ld_col_secondary_600: var(--col_jhs_prime_violett_800);
    --ld_col_secondary_400_txt: var(--ld_col_white_400);
    --ld_col_secondary_800: var(--col_jhs_prime_violett_800);
    --ld_col_secondary_400_txt: var(--ld_col_white_400);

    --ld_col_accept: var(--ld_col_primary_400);
    --ld_col_accept_txt: var(--ld_col_primary_400_txt);
    --ld_col_accept_hov: var(--ld_col_primary_200);
    --ld_col_accept_hov_txt: var(--ld_col_primary_200_txt);

    --ld_col_deny: var(--col_jhs_old_sec_red_500);
    --ld_col_deny_txt: var(--col_jhs_old_sec_black_500);
    --ld_col_deny_hov: var(--col_jhs_old_sec_red_400);
    --ld_col_deny_hov_txt: var(--col_jhs_old_sec_black_400);

    --ld_col_deac: var(--ld_col_black_200);
    --ld_col_deac_txt: var(--ld_col_black_200_txt);
    --ld_col_deac_hov: var(--ld_col_primary_800);
    --ld_col_deac_hov_txt: var(--ld_col_white_400);
}

:host, :root {
    --ioe_col_backend_primary_400: var(--ld_col_primary_400);
    --ioe_col_backend_primary_400_txt: var(--ld_col_primary_400_txt);

    --ioe_col_backend_primary_200: var(--ld_col_primary_200);
    --ioe_col_backend_primary_200_txt: var(--ld_col_primary_200_txt);
}



/* TODO(lm): fix naming conventions */
:host, :root {
    /* dropdown */
    --ld_dropdown_icon_bg: var(--ld_col_primary_400);

    /* selection */
    --ld_selection_bar_btn_bg: var(--ld_col_primary_400);
    --ld_selection_bar_btn_fg: var(--col_jhs_old_sec_black_900);
    --ld_selection_bar_value_bg: var(--col_jhs_old_sec_black_800);
    --ld_selection_bar_value_fg: White;

    /* box */
    --ld_box_dark_bg: var(--col_jhs_old_sec_black_900);
    --ld_box_dark_bg_hover: var(--col_jhs_old_sec_black_880);
    --ld_box_dark_fg: White;

    /* list */
    --ld_dropdown_btn_bg_col:     var(--ld_col_primary_400);
    --ld_dropdown_btn_bg_col_hov: var(--ld_col_primary_200);

    /* list */
    --ld_list_entry_odd_bg: #333333;
    --ld_list_entry_odd_fg: White;
    --ld_list_entry_even_bg: #222222;
    --ld_list_entry_even_fg: White;
    --ld_list_entry_hov_bg: #444444;
    --ld_list_entry_hov_fg: White;
    --ld_list_entry_sel_bg: var(--ld_col_primary_400);
    --ld_list_entry_sel_fg: var(--ld_col_primary_400);

    /* dropdown */
    --ld_dropdown_btn_bg_col: var(--ld_col_primary_400);
    --ld_dropdown_btn_bg_col_hov: var(--ld_col_primary_200);
    --ld_dropdown_btn_fg_col: Black;
    --ld_dropdown_btn_fg_col_hov: Black;
    --ld_dropdown_txt_bg_col: #ffffff;
    --ld_dropdown_txt_bg_col_hov: #aaaaaa;
    --ld_dropdown_txt_fg_col: Black;
    --ld_dropdown_txt_fg_col_hov: Black;

    /* checkboxes */
    --col_ld_checkbox_v1_prime: var(--ld_col_primary_400);
    --col_ld_checkbox_v1_sec:   Grey;

    /* ioe */
    --ioe_building_txt_bg: var(--col_jhs_old_sec_black_900);
    --ioe_banking_contract_block_bg: var(--col_jhs_old_sec_black_900);
    --ioe_banking_contract_calc_block_bg: var(--col_jhs_old_sec_black_800);
    --ioe_banking_contract_calc_block_fg: White;

    /* logbook */
    --ld_logbook_list_header_col: var(--ld_col_primary_400);
    --ld_logbook_list_tag_postivie_col: Green;
    --ld_logbook_list_tag_nagative_col: Red;
    --ld_logbook_list_tag_neutral_col: White;

    /* wandering-cups */
    --ioe_wandering_cups_btn_bg: var(--ld_col_primary_400);
    --ioe_wandering_cups_btn_bg_hov: var(--ld_col_primary_200);
}