/*
 * Copyright (C) 2024 denkbares GmbH, Germany
 *
 * This is free software; you can redistribute it and/or modify it under the
 * terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option) any
 * later version.
 *
 * This software is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this software; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA, or see the FSF
 * site: http://www.fsf.org.
 */

/* ######################################################## */
/* ------------- Introduce Light Mode Variables ----------- */
/* ######################################################## */

.light-mode {
	--bg-color-primary: #ffffff;
	--bg-color-primary-shade: #F9F9F9;
	--bg-color-secondary: #f6f6f6;
	--bg-color-secondary-shade: #EEE;
	--bg-color-primary-transparent: rgba(255, 255, 255, 0.9);
	--bg-color-secondary-transparent: rgba(0, 0, 0, 0.7);

	--text-color-primary: #000000;
	--text-color-primary-inverted: #ffffff;
	--text-color-primary-light: #333;
	--text-color-primary-link: #173a64;
	--text-color-secondary: #888;
	--text-color-secondary-shade: #666;
	--text-color-default-head: #036;

	--highlight-color-faint-yellow: var(--color-yellow-light);
	--highlight-color-faint-blue: #F5FAFF;
	--highlight-color-light: #d9edf7;
	--highlight-color-dark: rgba(248, 136, 25, 0.4);

	--color-grey-light: #DDD;
	--color-grey-medium: #cbcbcb;
	--color-grey: #ccc;
	--color-grey-dark: #444444;

	--color-green-faint: #dff0d8;
	--color-green-extra-light: #CFFFCF;
	--color-green-light: #808000;
	--color-green: #008000;
	--color-green-dark: #006400;
	--color-green-signal: #6A9514;
	--bg-color-green: #5cb85c;
	--bg-color-green-dark: #449d44;

	--color-pink-light: #f1889f;
	--color-pink: #b95d71;
	--color-pink-dark: #966E78;

	--color-purple-light: #986882;
	--color-purple: #915665;
	--color-purple-dark: #7D5066;

	--color-blue-extra-light: #bce7ff;
	--color-blue-light-transparent: rgba(75, 138, 221, 0.9);
	--color-blue-light: #57b6ff;
	--color-blue: #0263b2;
	--color-blue-dark: #1E2864;
	--color-blue-deep: #006;
	--color-blue-highlight: #0000ff;

	--color-turquoise-light: #88bdbc;
	--color-turquoise: #008080;

	--color-red-faint: #f2dede;
	--color-red-light: #FFCFCF;
	--color-red: #e81818;
	--color-red-dark: #ce0606;
	--bg-color-red-light: rgba(255, 222, 222, 0.5);
	--bg-color-red: #d9534f;
	--bg-color-red-dark: #c9302c;

	--color-orange-light: #ce8c00;
	--color-orange: #eaaf11;
	--color-orange-dark: #d95900;

	--color-yellow-light: #faf1d7;
	--color-yellow: #eac105;
	--color-yellow-dark: #d7b614;

	--color-brown-light: rgba(121, 79, 64, 1.0);
	--color-brown-light-70: rgba(121, 79, 64, 0.7);
	--color-brown: #a86210;
	--color-brown-dark: #6e2e00;

	--color-knowwe-primary: #1a3766;

	/* color gradients (DiaFlux flowcharts) */
	--color-blue-faint-gradient1: #bcf;
	--color-blue-faint-gradient2: #eef;

	--color-yellow-faint-gradient1: #ffb;
	--color-yellow-faint-gradient2: #ffe;

	--color-red-faint-gradient1: #fbb;
	--color-red-faint-gradient2: #fcc;
	--color-red-faint-gradient3: #fee;

	--color-green-faint-gradient1: #bfb;
	--color-green-faint-gradient2: #cfc;
	--color-green-faint-gradient3: #efe;

	--color-blue-gradient1: #1af;
	--color-blue-gradient2: #7cf;
	--color-blue-gradient3: #bef;

	--color-pink-gradient1: #fbf;
	--color-pink-gradient2: #fcf;
	--color-pink-gradient3: #fef;

	--color-grey-gradient1: #eee;
	--color-grey-gradient2: #ddd;
	--color-grey-gradient3: #f5f5f5;

	/* ######################################################## */
	/* -------------------- variables-mapping ------------------ */
	/* ######################################################## */

	/*-------- backgrounds --------*/
	--bg-color-base: var(--bg-color-primary);
	--bg-color-frame: #f8f9fb;
	--bg-color-infobox: var(--color-yellow-light);
	--bg-color-popup-contrast: var(--bg-color-infobox);
	--bg-color-scrollbar-thumb: var(--color-grey-light);
	--bg-color-scrollbar-thumb-hover: var(--color-grey-medium);
	--bg-color-head-transparent: var(--bg-color-primary-shade);
	/*--bg-color-footer: rgba(195, 195, 195, 0.2); light*/

	/* pretty print */
	--text-color-lit: #066;
	--text-color-pun: #660;
	--text-color-media-lit: #044;
	--text-color-media-pun: #440;

	/* hover */
	--hover-bg-color-links: transparent;
	--hover-bg-color-li: var(--bg-color-secondary-shade);
	--hover-bg-color-text-field: var(--bg-color-primary-shade);
	--hover-bg-color-btn-default: var(--bg-color-secondary-shade);
	--hover-text-color-links: var(--color-grey-dark);
	--hover-text-color-pagename: var(--text-color-primary);
	--hover-text-color-dropdown: var(--text-color-primary);
	--hover-border-color-btn-default: var(--color-grey);
	--hover-color-watches-line: rgba(240, 240, 241, 0.62);
	--hover-bg-color-btn-light-bg: var(--bg-color-primary-shade);

	/*-------- borders --------*/
	--border-color-default: #e2e2e9;
	--border-color-edit-blue: #9ACBFB;
	--border-color-infobox-blue: #bce8f1;
	--border-color-infobox-red: #ebccd1;
	--border-color-light: var(--highlight-color-light);

	/*-------- tables --------*/
	--bg-color-table-th-highlighted: #E9E9E9;
	--bg-color-table-odd-th: var(--bg-color-secondary-shade);
	--table-row-mulit-selected: #DDF;
	--table-row-selected: var(--bg-color-secondary-shade);
	--border-color-table: var(--color-grey-light);

	/*-------- tools --------*/
	--color-pagination-tools: #808080;

	/* styles with images */
	--bg-color-markupMenuIndicator: white /*url(../../templates/KnowWE/images/arrdownsmall.gif)*/;

	/* quick interview */
	--bg-color-quicki-answer: var(--color-blue-extra-light);

	/* -------- IntelliJ -------- */

	--color-ide-keyword: #0033b3;
	--color-ide-constant: #00627a;
	--color-ide-primitive: #871094;
	--color-ide-number: #1750eb;
	--color-ide-string: #067d17;
	--color-ide-comment: #8c8c8c;
	--color-ide-default: #000000;
	--color-ide-special: #9e880d;

	/* -------- COOM -------- */
	--text-combination: #8E54D4;

	/* background colors */
	--bg-grey-table-cell: #d7d7d7;

	--icon-color: #4A4A4A;
	--icon-color-hover: #2B2B2B;
	--icon-popper-color: #FFF;
	--icon-popper-color-hover: #E0E0E0;
}


/* ######################################################## */
/* ------------- Introduce Dark Mode Variables ----------- */
/* ######################################################## */

.dark-mode {
	/* general color palette */
	--bg-color-primary: #2b2b2b;
	--bg-color-primary-shade: #373738;
	--bg-color-secondary: #343434;
	--bg-color-secondary-shade: var(--color-grey-dark);
	--bg-color-primary-transparent: rgba(43, 43, 43, 0.9);
	--bg-color-secondary-transparent: rgba(68, 68, 68, 0.8);

	--text-color-primary: #dee2e6;
	--text-color-primary-inverted: #000000;
	--text-color-primary-light: #d7d7d7;
	--text-color-primary-link: #3f9ee9;
	--text-color-default-head: #3f9ee9;
	--text-color-secondary: #b9b9b9;
	--text-color-secondary-shade: #d2d2d2;

	--highlight-color-faint-yellow: rgba(253, 223, 172, 0.05);
	--highlight-color-faint-blue: rgba(245, 250, 255, 0.1);
	--highlight-color-light: rgba(78, 131, 178, 0.3);
	--highlight-color-dark: rgba(255, 184, 69, 0.7);
	--hover-color-default: rgba(255, 255, 255, 0.09);

	--color-grey-light: #DDD;
	--color-grey-medium: #545454;
	--color-grey: #464646;
	--color-grey-dark: #444444;
	--color-grey-extra-dark: #282727;

	--color-green-faint: #536c43;
	--color-green-extra-light: #749474;
	--color-green-light: #abab08;
	--color-green: #04b204;
	--color-green-dark: #008c3a;
	--color-green-signal: #6fa600;
	--bg-color-green: #297329;
	--bg-color-green-dark: #1b641b;

	--color-pink-light: #ff72c6;
	--color-pink: #ee5fab;
	--color-pink-dark: #c75096;

	--color-purple-light: #956dcb;
	--color-purple: #ca51f1;
	--color-purple-dark: #c936d5;

	--color-blue-light-transparent: rgba(108, 170, 255, 0.9);
	--color-blue-light: #60e5ff;
	--color-blue: #4aa8ff;
	--color-blue-dark: #2c81ff;
	--color-blue-deep: #3737ff;
	--bg-color-blue-extra-dark: #003964;
	--color-blue-highlight: #00c4ff;

	--color-turquoise-light: #729898;
	--color-turquoise: #02b4b4;


	--color-red-faint: #7c4646;
	--color-red-light: #ff8585;
	--color-red: #f6321c;
	--color-red-dark: #de2727;
	--bg-color-red: #b63936;
	--bg-color-red-dark: #912220;

	--color-orange-light: #f68b08;
	--color-orange: #ff7300;
	--color-orange-dark: #de4d00;

	--color-yellow-light: #ffe57c;
	--color-yellow: #ffd518;
	--color-yellow-dark: #ffd000;

	--color-brown-light: #c7879b;
	--color-brown-light-70: rgba(199, 135, 155, 0.7);
	--color-brown: #9f6639;
	--color-brown-dark: #b25006;

	--color-knowwe-primary: #3f9ee9;

	/* color gradients */
	--color-blue-faint-gradient1: #35516d;
	--color-blue-faint-gradient2: #417a9a;

	--color-yellow-faint-gradient1: #755419;
	--color-yellow-faint-gradient2: #c28000;

	--color-red-faint-gradient1: #520808;
	--color-red-faint-gradient2: #802828;
	--color-red-faint-gradient3: #915050;

	--color-green-faint-gradient1: #133519;
	--color-green-faint-gradient2: #184808;
	--color-green-faint-gradient3: #316410;

	--color-blue-gradient1: #0c1c70;
	--color-blue-gradient2: #0f1949;
	--color-blue-gradient3: #465395;

	--color-pink-gradient1: #3c0d40;
	--color-pink-gradient2: #825b86;
	--color-pink-gradient3: #8d6888;

	--color-grey-gradient1: #161616;
	--color-grey-gradient2: #4c4c4c;
	--color-grey-gradient3: #7e7e7e;

	/* ######################################################## */
	/* -------------------- variables-mapping ------------------ */
	/* ######################################################## */

	/*-------- backgrounds --------*/
	--bg-color-base: var(--bg-color-primary-shade);
	--bg-color-frame: var(--bg-color-primary-shade);
	--bg-color-infobox: var(--bg-color-secondary);
	--bg-color-popup-contrast: var(--color-grey-extra-dark);
	--bg-color-scrollbar-thumb: #4d4d4d;
	--bg-color-scrollbar-thumb-hover: #757575;
	--bg-color-head-transparent: var(--bg-color-primary-shade);
	/*--bg-color-footer: var(--bg-color-secondary-shade); dark*/

	/* pretty print */
	--text-color-lit: #00d9d9;
	--text-color-pun: #e8e800;
	--text-color-media-lit: #009393;
	--text-color-media-pun: #a2a202;


	/*-------- hover --------*/
	--hover-bg-color-links: var(--hover-color-default);
	--hover-bg-color-li: var(--hover-color-default);
	--hover-bg-color-text-field: var(--hover-color-default);
	--hover-bg-color-btn-default: var(--hover-color-default);
	--hover-text-color-links: var(--color-blue);
	--hover-text-color-pagename: var(--color-blue);
	--hover-text-color-dropdown: var(--color-blue);
	--hover-border-color-btn-default: var(--border-color-default);
	--hover-color-watches-line: var(--hover-color-default);
	--hover-bg-color-btn-light-bg: #343434;

	/*-------- borders --------*/
	--border-color-default: rgba(0, 0, 0, 0);
	--border-color-light: none;
	--border-color-edit-blue: rgba(154, 203, 251, 0.05);
	--border-color-infobox-blue: #38585d;
	--border-color-infobox-red: #8d6d6d;
	--border-color-table: var(--color-grey);

	/*-------- tables --------*/
	--bg-color-table-th-highlighted: #53585b;
	--bg-color-table-odd-th: var(--bg-color-primary-shade);
	--table-row-mulit-selected: #36424f;
	--table-row-selected: #5b5b5b;

	/* Tools */
	--color-pagination-tools: #afafaf;

	/* styles with images */
	--bg-color-markupMenuIndicator: var(--bg-color-primary-shade);

	/* quick interview */
	--bg-color-quicki-answer: var(--bg-color-blue-extra-dark);

	/* -------- IntelliJ -------- */

	--color-ide-keyword: #cf8e6d;
	--color-ide-constant: #c77dba;
	--color-ide-primitive: #56a8f5;
	--color-ide-number: #2aacb8;
	--color-ide-string: #6aab73;
	--color-ide-comment: #7a7e85;
	--color-ide-default: #bcbec4;
	--color-ide-special: #f75464;

	/* -------- COOM -------- */
	--text-combination: #a37ad5;

	/* background colors */
	--bg-grey-table-cell: #646464;

	--icon-color: #A0A0A0;
	--icon-color-hover: #F0F0F0;
	--icon-popper-color: #1F1F1F;
	--icon-popper-color-hover: #2A2A2B;
}

/* ######################################################## */
/* ------------- Set Light & Dark Mode Variables ----------- */
/* ######################################################## */

.light-mode, .dark-mode {
	/*-------- backgrounds --------*/
	--bg-color-content: var(--bg-color-primary);
	--bg-color-default-Markup: var(--bg-color-primary-shade);
	--bg-color-tt: var(--bg-color-secondary);
	--bg-color-weblogentry: var(--bg-color-secondary);
	--bg-color-edit: var(--bg-color-secondary);
	--bg-color-information: var(--highlight-color-light);
	--bg-color-footer: var(--bg-color-primary-shade);

	/*-------- text --------*/
	--text-color-tooltipster: var(--text-color-primary-light);
	--text-color-panel-heading: var(--text-color-primary-light);
	--text-color-dropdown-markupMenu: var(--text-color-primary-light);
	--text-information: var(--text-color-default-head);

	/*!*-- StyleRenderer --*!*/
	--text-color-keywords: var(--text-color-primary);
	--text-color-content: var(--text-color-primary-light); /* 505050*/
	--text-color-comment: var(--text-color-secondary);
	--text-color-property: var(--color-blue-dark);
	--text-color-solution: var(--color-pink-dark);
	--text-color-flowchart-exit: var(--color-purple-light);
	--text-color-constant: var(--color-purple-dark);
	--text-color-number: var(--color-purple-dark);
	--text-color-operator: var(--color-blue-dark);
	--text-color-locale: var(--color-turquoise);
	--text-color-choice: var(--color-blue-dark);
	--text-color-question: var(--color-green);
	--text-color-condition: var(--color-green);
	--text-color-questionnaire: var(--color-green-light);
	--text-color-flowchart: var(--color-green-light);
	--text-color-flowchart-start: var(--color-green-dark);
	--text-color-prompt: var(--color-green-dark);
	--text-color-package-name: var(--color-brown-light-70);
	--text-color-package-name-opaque: var(--color-brown-light);
	--text-color-answer-reference: var(--color-blue-dark);
	--text-color-variable: var(--color-orange);
	--text-color-coom-name: var(--color-blue-dark);
	--text-color-comfort: var(--text-color-secondary-shade);
	--text-color-warning: var(--color-orange-light);
	--bg-color-warning: var(--color-orange);
	--text-color-error: var(--color-red);
	--text-color-unexpected: var(--color-red);
	--text-color-not-found: var(--color-red);
	--text-color-create-page: var(--color-red);
	--text-color-success: var(--color-green-signal);
	--text-color-knowwe-ok: var(--color-green-signal);
	--text-color-knowwe-warning: var(--color-yellow);
	--text-color-knowwe-error: var(--color-red-dark);
	--text-color-fail: var(--color-red-dark);
	--text-color-location-embraced: var(--color-orange);
	--text-color-condition-fulfilled: var(--color-green-extra-light);
	--text-color-condition-false: var(--color-red-light);


	/* pretty print */
	--text-color-str: var(--color-green);
	--text-color-kwd: var(--color-blue);
	--text-color-com: var(--text-color-secondary);
	--text-color-typ: var(--text-color-secondary-shade);
	--text-color-pln: var(--text-color-primary);
	--text-color-tag: var(--color-blue-dark);
	--text-color-atn: var(--color-pink-dark);
	--text-color-atv: var(--color-green);
	--text-color-dec: var(--color-pink-dark);

	--text-color-media-str: var(--color-green-dark);
	--text-color-media-kwd: var(--color-blue-deep);
	--text-color-media-com: var(--color-red-dark);
	--text-color-media-typ: var(--color-purple-dark);
	--text-color-media-pln: var(--text-color-primary);
	--text-color-media-tag: var(--color-blue-deep);
	--text-color-media-atn: var(--color-purple-dark);
	--text-color-media-atv: var(--color-green-dark);

	/* watchlist */
	--text-color-watches-general: var(--text-color-primary);
	--text-color-watches-value: var(--color-pink-light);
	--text-color-watches-expression: var(--color-green);
	--text-color-watches-expressionerror: var(--color-red);

	/*-------- borders --------*/
	--border-color-none: var(--bg-color-primary);
	--border-color-input: var(--color-grey);
	--border-color-form-forcus: var(--color-grey);
	--border-color-strong: var(--text-color-primary);

	/*-------- hover --------*/
	--hover-bg-color-inner-links: none;
	--hover-text-color-header-icons: var(--color-blue);
	--hover-text-color-btn-default: var(--text-color-primary);

	/* -------- other expressions -------- */
	--bg-color-true: #CFFFCF;
	--bg-color-false: #FFCFCF;
	--bg-color-unknown: #CFD5FF;
	--bg-color-fired: #CFFFCF;

	/* -------- COOM -------- */
	/* text colors */
	--text-color-implication: #a4305b;
	--text-color-combination: var(--text-combination);
	--text-color-structure: #2266A1;
	--text-color-enumeration: #168641;
	--text-color-include: #F4A300;

	/* background colors */
	--bg-color-implication: #a4305b;
	--bg-color-combination: #8E54D4;
	--bg-color-structure: #2266A1;
	--bg-color-enumeration: #168641;
	--bg-color-include: #F4A300;

	--bg-color-empty-table-cell: var(--bg-grey-table-cell);

	--icon-button-color: var(--icon-color);
	--icon-button-color-hover: var(--icon-color-hover);
	--icon-button-popper-color: var(--icon-popper-color);
	--icon-button-popper-color-hover: var(--icon-popper-color-hover);
}

/* ############################################################## */
/* ------------- Set Transitions for switching modes ----------- */
/* ############################################################## */

.context-prefs *, .context-prefs input,
.context-prefs select, .context-prefs button,
.context-prefs .form-control, .context-prefs a,
.context-prefs .header, .context-prefs .pagename a {
	transition: background-color 0.3s ease,
	background 0.3s ease,
	color 0.1s,
	border-color 0.3s ease,
	border 0.3s ease,
	box-shadow 0.3s ease;
}