/*
 * Copyright (c) 2025 semedy AG. All rights reserved.
 */

:root {
	/* White Family */
	--color-white-base: #ffffff;
	--color-white-100: #f9f9f9;
	--color-white-200: #f5f5f5;
	--color-white-300: #f4f4f4;
	--color-white-400: #f2f2f2;
	--color-white-500: #f1f1f1;
	--color-white-600: #f0f0f0;
	--color-white-700: #efefef;
	--color-white-800: #eeeeee;
	--color-white-900: #e7e7e7;

	/* Mid Gray Family */
	--color-midgray-50-light-dove: #d3d3d3;
	--color-midgray-100-pearl: #e2dddd;
	--color-midgray-200-frost: #e0e0e0;
	--color-midgray-300-ash: #dfdfdf;
	--color-midgray-400-porcelain: #dcdcdc;
	--color-midgray-500-smoke: #dddddd;
	--color-midgray-600-silver-cloud: #cdcdcd;
	--color-midgray-700-pebble: #cccccc;
	--color-midgray-800-stone: #bbbbbb;
	--color-midgray-900-granite: #b8b8b8;

	/* Dark Gray Family */
	--color-darkgray-50-shadow: #a9a9a9;
	--color-darkgray-50-shadow-opacity-75: #a9a9a9bf;
	--color-darkgray-100-slate: #999999;
	--color-darkgray-200-steel: #888888;
	--color-darkgray-300-iron: #808080;
	--color-darkgray-300-iron-opacity-30: #80808030;
	--color-darkgray-400-graphite: #777777;
	--color-darkgray-500-cast-iron: #6c6c6c;
	--color-darkgray-600-charcoal-dust: #6a6a6a;
	--color-darkgray-700-carbon: #666666;
	--color-darkgray-800-coal: #555555;
	--color-darkgray-900-deep-smoke: #4b4b4b;

	/* Charcoal Family */
	--color-charcoal-100-shadow: #484848;
	--color-charcoal-200-smoky-steel: #46494d;
	--color-charcoal-300-ember: #444444;
	--color-charcoal-400-dark-ash: #3c3c3c;
	--color-charcoal-500-ebony: #333333;
	--color-charcoal-600-dark-ebony: #232323;
	--color-charcoal-700-jet-black: #222222;
	--color-charcoal-800-obsidian: #111111;
	--color-black-base: #000000;

	/* Unique Colors */
	--color-slate-base: #f2f5f7;
	--color-warmgray-base: #aaaaaa;
	--color-navy-dark: #091e42;
	--color-white-blue-frost: #fafaff;
	--color-cornflower-blue-pale: #b1c2f2;
	--color-cornflower-blue-pale-opacity-75: #b1c2f2bf;
	--color-purple-dark: #362b36;

	/* Sky Blue Family */
	--color-sky-blue-50-cloudy: #e7f5ff;
	--color-sky-blue-100-frost: #edf7ff;
	--color-sky-blue-150-breezy: #e8f6ff;
	--color-sky-blue-200-ice: #d7ebf9;
	--color-sky-blue-250-cool-mist: #bcdde5;
	--color-sky-blue-300-pale: #d0e5ff;
	--color-sky-blue-350-powder: #b9cddb;
	--color-sky-blue-400-sky: #b2e5f1;
	--color-sky-blue-500-light: #a9d9ef;
	--color-sky-blue-600-bright: #a5d8ff;
	--color-sky-blue-700-mid: #8dbecb;
	--color-sky-blue-800-steel: #8fbdc8;

	/* Ocean Blue Family */
	--color-ocean-blue-100-light-wave: #aed0ea;
	--color-ocean-blue-200-coral-sea: #73b6c8;
	--color-ocean-blue-300-deep-wave: #74b2e2;
	--color-ocean-blue-400-summer-sky: #6ec0ff;
	--color-ocean-blue-450-aqua-glow: #3baae3;
	--color-ocean-blue-500-caribbean: #2694e8;
	--color-ocean-blue-600-midnight-ocean: #256fa0;
	--color-ocean-blue-700-deep-sea: #1864ab;
	--color-ocean-blue-800-pacific: #005972;

	/* Royal Blue Family */
	--color-royal-blue-100-royal: #4d92fd;
	--color-royal-blue-200-glacier: #0088ff;
	--color-royal-blue-300-sapphire: #0153ff;
	--color-royal-blue-400-bright-royal: #0000ff;
	/* Classic Blue */
	--color-blue-base: #0000ff;

	/* Deep Blue Family */
	--color-blue-navy: #004a7f;
	--color-steel-blue-600-navy: #1864ab;
	--color-deep-blue-100-nightfall: #256fa0;
	--color-deep-blue-200-arctic: #0085c2;
	--color-steel-blue-800-ocean: #0085c2;


	/* Steel Blues */
	--color-steel-blue-100-light: #bfcddb;
	--color-steel-blue-200-mid: #aed0ea;
	--color-steel-blue-250-azure-mist: #5d96bf;
	--color-steel-blue-300-bright: #74b2e2;
	--color-steel-blue-400-steel: #7da2bd;
	--color-steel-blue-700-dark: #256fa0;

	/* Miscellaneous Blues */
	--color-blue-slate: #6f9fc1;
	--color-blue-electric: #6ec0ff;
	--color-blue-azure: #3baae3;

	/* Green */
	--color-green-base: #008000;
	/* Light Greens */
	--color-green-light-mint-pale: #e2fff2;
	--color-green-light-100-pastel: #adecc9;
	--color-green-light-200-bright: #95d788;
	--color-green-light-300-olive: #84ba46;
	--color-green-light-400-muted: #7eba7c;
	--color-green-light-500-vivid: #01ba01;

	/* Dark Greens */
	--color-darkgreen-base: darkgreen;
	--color-green-dark-100-forest: #027902;
	--color-green-dark-200-emerald: #008d4c;
	--color-green-dark-300-grass: #007a1c;
	--color-green-dark-400-deep: #578e57;
	--color-green-dark-500-spruce: #447d43;
	--color-green-dark-600-jade: #026738;

	/* Light Teals */
	--color-teal-light-100-pastel: #bedbe3;
	--color-teal-light-200-muted: #c4d9df;
	--color-teal-light-300-soft: #a6d2d1;
	--color-teal-light-400-pale: #a4c3ca;
	--color-teal-light-500-fresh: #83afb7;

	/* Dark Teals */
	--color-teal-dark-100-forest: #4a8f9f;
	--color-teal-dark-200-calm: #5a8d9a;
	--color-teal-dark-300-strong: #649297;
	--color-teal-dark-400-deep: #318da4;
	--color-teal-dark-500-storm: #1c4955;
	--color-teal-dark-600-midnight: #003844;

	/* Light Yellows */
	--color-yellow-light-100-pastel: #fcfcc2;
	--color-yellow-light-200-soft: #fff1a6;
	--color-yellow-light-300-muted: #fefd98;

	/* Bright Yellows */
	--color-yellow-bright-100-vivid: #ffef8f;
	--color-yellow-bright-200-sunshine: #e1e15d;
	--color-yellow-bright-300-lemon: #f9dd34;
	--color-yellow-bright-400-neon: #e7ff00;

	/* Oranges */
	--color-orange-100-bright: #fea305;
	--color-orange-200-burnt: #d48509;

	/* Light Earth Tones */
	--color-earth-light-100-pastel: #fdf3d7;
	--color-earth-light-200-peach: #ffe4c4;
	--color-earth-light-300-wheat: #d7c183;

	/* Deep Earth Tones */
	--color-earth-deep-100-ochre: #a28869;
	--color-earth-deep-200-olive: #828236;
	--color-earth-deep-300-goldenrod: #8a6b1a;

	/* Red colors */
	--color-red-base: red;
	/* Almost white/pale pink */
	--color-red-50-lightest: #fdecea;
	--color-red-100-pale: #ffd4d4;
	--color-red-200-light: #ffc9c9;
	/* Soft red */
	--color-red-300-soft: #e57575;
	--color-red-400-medium: #ce6666;
	/* True red */
	--color-red-500-primary: #d73925;
	--color-red-600-strong: #cd0a0a;
	--color-red-700-bold: #c10101;
	--color-red-800-deep: #be2121;
	/* Deep red */
	--color-red-900-dark: #a90329;
	--color-red-900-dark-alt: #a90325;
	/* Almost black/burgundy */
	--color-red-950-darkest: #6d0019;

	/* Background */
	--background-color-light-grey: var(--color-midgray-500-smoke);
	--background-color-white-base: var(--color-white-base);
	--background-color-white-default: var(--color-white-800);
	--background-blue-linear-gradient: linear-gradient(to bottom, var(--color-blue-navy) 0%, var(--color-steel-blue-250-azure-mist) 100%);
	--background-red-linear-gradient: linear-gradient(to bottom, var(--color-red-900-dark) 0%, var(--color-red-950-darkest) 100%);

	/* Font, text related */
	--font-family-default: "Trebuchet MS", Arial, Helvetica, sans-serif;
	--font-family-jquery: "Lucida Grande", "Lucida Sans", Arial, sans-serif;

	--font-size-default: 13px;
	--font-size-small: 12px;
    --font-size-medium: 16px;
	--font-size-h1: 24px;
    --font-size-h2: var(--font-size-medium);
	--font-size-h3: 14px;
	--font-size-h4: var(--font-size-small);

	--line-height-default: 18px;
	--line-height-h3: 20px;
	--line-height-h1: 28px;

	--text-color-white: var(--color-white-base);
	--text-color-black: var(--color-black-base);
	--text-color-gray: var(--color-darkgray-300-iron);
	--text-color-dark-gray: var(--color-charcoal-500-ebony);
	--text-color-link: var(--color-royal-blue-300-sapphire);
	--text-color-link-hover: var(--color-royal-blue-200-glacier);
	--text-color-blue-on-hover: var(--color-blue-slate);
	--text-color-darkgrey: var(--color-darkgray-50-shadow);
	--text-color-darkgray-carbon: var(--color-darkgray-700-carbon);

	/* Dialog */
	--background-color-dialog-blue-ish-white: var(--color-slate-base);
	--border-color-dialog: var(--color-ocean-blue-800-pacific);
	--background-color-dialog-white-base: var(--color-white-base);
	--foreground-color-dialog-white-base: var(--color-white-base);
	--border-radius-dialog: var(--border-radius-extra-large);

	/* Tabs */
	--background-color-tab-blue-slate: var(--color-blue-slate);
	--background-color-tab-hover-sky-blue-powder: var(--color-sky-blue-350-powder);
	--min-width-tab-panel: 1100px;

	/* Buttons */
	--border-width-button-small: 1px;

	--background-color-button-sky-blue: var(--color-sky-blue-200-ice);
	--text-color-button-teal-dark: var(--color-teal-dark-500-storm);
	--color-button-teal-dark: var(--color-teal-dark-500-storm);
	--border-button-teal-dark: var(--border-width-button-small) solid var(--color-button-teal-dark);

	--border-color-button-darkgray-slate: var(--color-darkgray-100-slate);
	--border-button-darkgray-slate: var(--border-width-button-small) solid var(--border-color-button-darkgray-slate);

	--border-color-ocean-blue: var(--color-ocean-blue-200-coral-sea);
	--border-button-ocean-blue: var(--border-width-button-small) solid var(--border-color-ocean-blue);
	--border-radius-button-with-label: 6px;
	--background-color-button-hover-sky-blue: var(--color-sky-blue-100-frost);
	--border-color-button-hover-teal-dark: var(--color-teal-dark-200-calm);
	--height-button: var(--height-ui-component-default);

	/* Table related colors*/
	--color-table-header: var(--text-color-black);
	--background-color-table-odd: var(--color-white-400);
	--background-color-table-row-hover: var(--color-sky-blue-300-pale);

	--text-color-table-warning: var(--color-orange-200-burnt);

	/* UI Component */
	--height-ui-component-default: 28px;
	--box-shadow-base-small: 2px 2px 2px var(--color-darkgray-50-shadow-opacity-75);
	--box-shadow-base-medium: 3px 3px 2px var(--color-darkgray-50-shadow-opacity-75);
	--box-shadow-element: 3px 3px 2px var(--color-cornflower-blue-pale-opacity-75);

	--box-shadow-focus: 0px 0px 3px 2px var(--color-steel-blue-400-steel);
	--box-shadow-focus-inset: inset 0px 0px 2px 1px var(--color-steel-blue-400-steel);

	--border-gray-default: 1px solid var(--color-darkgray-50-shadow);
	--border-grey-default: 1px solid var(--color-darkgray-300-iron);
	--border-black-default: 1px solid var(--color-black-base);
	--border-dark-gray-default: 1px solid var(--color-charcoal-500-ebony);
	--border-default: 1px solid var(--color-darkgray-100-slate);
	--border-color-white: var(--color-white-base);
	--border-color-steel-blue: var(--color-steel-blue-400-steel);

	--border-radius-small: 2px;
	--border-radius-medium: 4px;
	--border-radius-default: var(--border-radius-medium);
	--border-radius-large: 8px;
	--border-radius-extra-large: 10px;

	--padding-default: 4px 6px;
	--padding-button-with-label: 4px 16px;

	--gap-extra-small: 4px;
	--gap-small: 8px;
	--gap-medium: 12px;
	--gap-large: 20px;
	--gap-extra-large: 32px;

	/* Feedback panel related */
	--background-color-feedback-warning: var(--color-yellow-bright-100-vivid);
	--border-feedback-warning: 1px solid var(--color-yellow-bright-300-lemon);

	--background-color-feedback-info: var(--color-sky-blue-400-sky);
	--color-info-border: #9FD0DC;
	--color-feedback-info: var(--color-ocean-blue-450-aqua-glow);
	--border-feedback-info: 1px solid var(--color-info-border);

	--color-feedback-success: var(--color-green-dark-200-emerald);

	--color-feedback-error: var(--color-red-600-strong);

	/* Footer */
	--border-color-footer: var(--color-midgray-500-smoke);
	--background-color-footer: var(--background-color-white-default);

	/* Dashboard height stuff */
	--padding-vertical-default: 4px;
	--action-buttons-margin: 0px;
	--height-action-buttons-total: 20px;
	--action-button-total-height: calc(var(--padding-vertical-default) * 2 + var(--action-buttons-margin) * 2 + var(--font-size-default) * 1.5 + var(--border-width-button-small) * 2);

	--header-height: 80px;
	--header-padding-vertical: 0px;
	--header-total-height: calc(var(--header-height) + var(--header-padding-vertical));

	--content-area-padding-vertical: 20px; /* Bottom, top each 20px*/
	--footer-logo-height: 70px;
	--footer-border-top-width: 2px;
	--footer-total-height: calc(var(--footer-logo-height) + var(--footer-border-top-width));

	--navigation-buttons-height-estimation: 52px;

	--tab-row-top-margin: 2px;
	--tab-row-button-line-height: 20px;
	--tab-row-button-top-padding: 5px;
	--tab-row-button-bottom-padding: 3px;
	--tab-row-bottom-margin: 4px;

	--tab-title-top-padding: 5px;
	--tab-title-bottom-padding: 3px;
	--tab-title-height: 21px;
	--tab-title-row-height: 30px;
	--tab-title-row-padding-bottom: 2px;
	--tab-title-row-total-height: calc(var(--tab-title-row-height) + var(--tab-title-row-padding-bottom));

	/* Scrollable table related css */
	/* dashboard height consist of the overview, my wip, my under review tabs .etc = 2 line of buttons + margin*/
	--dashboard-tabs-total-height: calc((var(--tab-row-top-margin) + var(--tab-row-button-top-padding) + var(--tab-row-button-line-height) + var(--tab-row-button-bottom-padding)) * 2 + var(--tab-row-bottom-margin));
	/* 100vh - header - content padding - footer - navigation buttons - tab title (dashboard) -  (2 rows of action buttons + a little bit padding (20px));*/
	--max-height-for-search-result-table-in-blank-search: calc(100vh - var(--header-total-height) - (var(--content-area-padding-vertical) * 2) - var(--footer-total-height) - var(--navigation-buttons-height-estimation) - var(--tab-title-row-total-height) - (var(--action-button-total-height) * 2 + 20px));
	/* Same with above but exclude the action buttons*/
	--max-height-for-facet-in-blank-search: calc(var(--max-height-for-search-result-table-in-blank-search) + (var(--action-button-total-height) * 2 + 20px));
	/* Same with search result table but we need to include the dashboard's tab total height.*/
	--max-height-for-search-result-table-in-dashboard: calc(var(--max-height-for-search-result-table-in-blank-search) - var(--dashboard-tabs-total-height));
	--max-height-for-facet-in-dashboard: calc(var(--max-height-for-facet-in-blank-search) - var(--dashboard-tabs-total-height));
	/* 80px are the space occupied by the the action button area and navigation area */
	--max-height-for-search-result-table-in-value-dialog: calc(50vh - 80px);
	--max-height-for-facet-in-value-dialog: calc(50vh);
	--max-height-for-similary-search-result-table: calc(var(--max-height-for-facet-in-blank-search) + var(--action-button-total-height));

	/* Miscellaneous*/
	--background-color-tooltip: var(--color-navy-dark);
	--preview-info-color: #bedaf1;
}