// Bubblegum Sweetness
$color-darkest: #0c6170;
$color-darker: #37beb0;
$color-base: #a4e5e0;
$color-lighter: #dbf5f0;
$color-lightest: #e8f3f1;

// Blaugrüne Naturtöne
$color-darkest: #071e20;
$color-darker: #004445;
$color-base: #2c7873;
$color-lighter: #6fb98f;
$color-lightest: #d2f6e2;

// Kühles Nass
$color-darkest: #003b46;
$color-darker: #07575b;
$color-base: #66a5ad;
$color-lighter: #c4dfe6;
$color-lightest: #f0f0f0;

// Bare Beauty
$color-darkest: #1f3541;
$color-darker: #5289b5;
$color-base: #7bb1d4;
$color-lighter: #afd8f2;
$color-lightest: #e1f0f3;

// Blautöne
$darkest: #03045e;
$darker: #023e8a;
$dark: #0077b6;

$middark: #0096c7;
$base: #00b4d8;
$midlight: #48cae4;

$light: #90e0ef;
$lighter: #ade8f4;
$lightest: #caf0f8;
$extralight: #e1f0f3;

// TODO

$color-darkest: pink; // #03045e;
$color-darker: pink; // #023e8a;
$color-dark: pink; // #0077b6;
$color-middark: pink; // #0096c7;
$color-base: pink; // #00b4d8;
$color-midlight: pink; // #48cae4;
$color-light: pink; // #90e0ef;
$color-lighter: pink; // #ade8f4;
$color-lightest: pink; // #caf0f8;
$color-extralight: pink; // #e1f0f3;

// // TODO

/// GARY

$color-g: #fafafa;
$color-g: #f8f8f8;
$color-g: #f7f7f7;
$color-g: #f1f1f1;
$color-g: #e8e8e8;
$color-g: #dbdbdb;
$color-g: #cacaca;
$color-g: #b4b4b4;
$color-g: #989898;
$color-g: #767676;
$color-g: #505050;
$color-g: #292929;

//// Ocean
//// https://www.colorbox.io/#steps=11#hue_start=200#hue_end=213#hue_curve=easeInQuad#sat_start=4#sat_end=90#sat_curve=easeOutQuad#sat_rate=130#lum_start=100#lum_end=30#lum_curve=easeOutQuad#minor_steps_map=0

/*
#F2FBFF   - black
#D6F0FE   - black
#BAE6FC   - black
#84CFF7   - black
#55B9EF   - black
#2FA1E5   - black
#128AD6   - black
#0072C3   - white
#005FAB   - white
#004A8E   - white
#00356E   - white
#00224D   - white
*/

$color-0: #f2fbff;
$color-5: #d6f0fe;
$color-10: #bae6fc;
$color-20: #84cff7;
$color-30: #55b9ef;
$color-40: #2fa1e5;
$color-50: #128ad6;
$color-60: #0072c3;
$color-70: #005fab;
$color-80: #004a8e;
$color-90: #00356e;
$color-100: #00224d;

// color_%element%_[background|border|outline|shadow|text]_[secondary]_[checked]_[disabled]_[hover|focus]

$color_background: #f2fbff; // color 0
$color_background_secondary: #d6f0fe;
$color_background_text: black;

$color_h1_text: #00356e; // color 90
$color_h2_text: #00224d; // color 100
$color_h3_text: #128ad6; // color 50
$color_h4_text: #128ad6; // color 50
$color_h5_text: #128ad6; // color 50
$color_h6_text: #128ad6; // color 50

$color_a_text: #005fab; // color 70
$color_a_text_hover: #0072c3; // color 80

$color_thead_background: #128ad6; // color 50
$color_thead_border: #128ad6; // color 50
$color_thead_text: #fff;
$color_tbody_background: #84cff7; // color 20
$color_tbody_background_secondary: #bae6fc; // color 10
$color_tr_border: #bbb;

$color_markdown_info_background: #dbe8ff;
$color_markdown_info_border: #0075ca;
$color_markdown_info_text: #0075ca;
$color_markdown_success_background: #dbffdf;
$color_markdown_success_border: #1baf00;
$color_markdown_success_text: #1baf00;
$color_markdown_warn_background: #f8ffdb;
$color_markdown_warn_border: #c7b000;
$color_markdown_warn_text: #c7b000;
$color_markdown_error_background: #ffdbdb;
$color_markdown_error_border: #ca0000;
$color_markdown_error_text: #ca0000;

$color_container_background: #fff;
$color_container_h1_text: #00224d; // color 100
$color_container_h2_text: #00224d; // color 100

$color_header_background: #292929;
$color_header_hr_background: #505050;

$color_mobile_nav_overlay_background: #000;

$color_mobile_nav_button_background: $color_header_background; // color 100
$color_mobile_nav_button_text: #fff;

$color_nav_button_background: #292929;
$color_nav_button_background_active: #005fab;
$color_nav_button_background_hover: #0072c3;

$color_nav_button_border: #1d1d1d;
$color_nav_button_border_active: #004d8b;
$color_nav_button_border_hover: #0065ad;
$color_nav_button_text: #fff;

$color_nav_close_button_text: #fff;

$color_input_background: #fff;
$color_input_background_disabled: #f6f8ff;
$color_input_focus: #275efe;
$color_input_border: #bbc1e1;
$color_input_border_hover: #275efe;
$color_input_outline_focus: rgba(39, 94, 254, 0.3);

$color_select_background: #fff;
$color_select_border: #bbc1e1;
$color_select_border_hover: #275efe; // color 60
$color_select_text: #00224d; // color 100

$color_button_background: #0072c3;
$color_button_text: #fff;
$color_button_background_hover: #128ad6; // color 50
$color_button_background_focus: #128ad6; // color 50
$color_button_border: #005a9b;
$color_button_border_active: #005a9b;

$color_slidebox_background: #efefef;
$color_slidebox_background_disabled: #fff;
$color_slidebox_background_checked: $color_input_focus;
$color_slidebox_background_checked_disabled: #ffcd98;
$color_slidebox_border: $color_input_border;
$color_slidebox_thumb: #fff;
$color_slidebox_thumb_shadow: #aaa;

$color_num_background: #eaeaea;
$color_num_border: #dcdcdc;
$color_num_text: #444;
$color_num_track_background: $color_input_focus;
$color_num_track_progress_background: #ddd;
$color_num_thumb: $color_input_focus;
$color_num_thumb_background: #eee;

$color_menu_item_background: #fff;
$color_menu_item_background_hover: #128ad6; // color 50
$color_menu_item_text: #000;
$color_menu_item_text_hover: #fff;

$color_menu_body_background: #fff;

$color_toggleable_text: #fff;

// * site specific * //

// konto
$color_accheader_background: $color_thead_background;
$color_accheader_border: $color_thead_border;

$color_attrheader_background: $color_thead_background;
$color_attrheader_text: $color_thead_text;

$color_attr_border: $color_tr_border;

// login
$color_login_container_background: #00224d; // color 100
$color_login_container_h1_text: #00224d; // color 100
$color_login_container_p_text: white; // color 50

$color_login_container_staff_background: #55b9ef; // color 30

$color_login_container_button_background: #128ad6; // color 50
$color_login_container_button_text: #000;

$color_login_container_select_background: #fff;
$color_login_container_select_border: #d6f0fe; // color 5
$color_login_container_select_border_hover: #000; // color 60
$color_login_container_select_text: #00224d; // color 100

$color_card_background: #fff; //z.B. cards mit listen
$color_card_border: #fff;