/* ==============================================================
   Variables
   ==============================================================*/
/* FONTS */
@fontFamily: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@images: "../../images";
@fontSmall: 1.2rem;
@fontMedium: 1.4rem;
@fontNormal: 1.6rem;
@fontLarge: 1.8rem;
@fontXLarge: 2.1rem;

/* BASIC COLORS */
@white: #fff;
@black: #1a1a1a;
@lightgray: #eee;
@gray: #6f6f6f;
@orange: #f08421;
@placeholder: rgba(0,0,0,0.25);
@colorOutline: #FF0038;

/* CI COLORS */
@ciColor1: #3365a9; // blue
@ciHovercolor1: #4576BA; // slightly lighter blue

@ci-color2: #000; // CI Color 2
@ci-hovercolor2: #000; // CI Color 2

@ci-color3: #000; // CI Color 3
@ci-hovercolor3: #000; // CI Color 3

@ci-color4: #000; // CI Color 4
@ci-hovercolor4: #000; // CI Color 4

@lowerblack: #222;
@middleblackContrast: #343434;
@middleblack: #444;
@middleblackHover: #565656;
@middlegray: #d5d5d5;
@neutralgray: #f2f3f4;
//@blue: #3365a9;
//@ci-hovercolor1: #507ebf;
@subred: #8a0e13;
@hoversubred: #aa292f;
@subgreen: #095D42;
@hoversubgreen: #1f7358;

/* MESSAGE COLORS */
@red: #c7254e;
@green: #468847;

/* BUTTON COLORS */
@btnDefault: #555;
@btnDefaultBorder: #ccc;
@btnDefaultBgc: #f7f7f7;
@btnDefaultHoverBgc: #f2f3f4;
@btnDanger: #721c24;
@btnDangerBorder: #721c24;
@btnDangerBgc: #f8d7da;
@btnDangerHoverBgc: #721c24;
@btnSuccess: #155724;
@btnSuccessBorder: #155724;
@btnSuccessBgc: #d4edda;
@btnSuccessHoverBgc: #155724;
@btnFullHoverBgc: #cce5ff;


/* STATISTICS */
@statBackgroundColor: #fffdf6;
@statDarkgray: #999;

/* NER COLORS */
@personColor: #0174DF;
@locationColor: #FF8000;
@corporationColor: #298A08;
@tagHoverColor: #eee;
@scaleHandleColor: #8A0808;

/* READING MODE COLORS */
@readingModeBg: #1a1a1a;

/* CROWDSOURCING COLORS */
@progressCompletion: #95C476;
@darkBlue: rgb(53,111,162);
@yellowTransparent: rgba(250, 250, 0, .3);
@ci-color1Transparent: rgba(66,139,202,.3);

/* RIGHT TO LEFT LANGUAGES STYLING */
@RTL: ~'html[dir=rtl]';

/* MEDIA QUERY BREAK POINTS */
@xSmallBreakpoint: 480px;
@smallBreakpoint: 768px;
@mediumBreakpoint: 992px;
@largeBreakpoint: 1200px;

/* ==================================== >>
THEMING
 << =================================== */
:root {
	.mx-theme-light;
}

// ****************************************** //
// **** EN-DISABLE COLOR MODE PROPERTIES **** //
@colorModes: true;
// ****************************************** //
// ****************************************** //

// OS OR BROWSER WANTS DARK THEME
@media (prefers-color-scheme: dark) {
	:root {
		& when (@colorModes = true) {
			.mx-theme-dark;
		}
	}
}

// DARK THEME
@color-theme-dark: color-theme-dark;

.@{color-theme-dark} {
	& when (@colorModes = true) {
		.mx-theme-dark;
	}
}

.mx-dark-mode-rules(@darkmodeProps) {
  @media (prefers-color-scheme: dark) { @darkmodeProps(); }
  .@{color-theme-dark} &              { @darkmodeProps(); }
}

// LIGHT THEME
@color-theme-light: color-theme-light;

.@{color-theme-light} {
	& when (@colorModes = true) {
		.mx-theme-light;
	}
}

.mx-light-mode-rules(@lightmodeProps) {
  @media (prefers-color-scheme: light) { @lightmodeProps(); }
  .@{color-theme-light} &              { @lightmodeProps(); }
}

// Assign custom properties to allow switching themes on runtime
@ci-color1: var(--ci-color1);
@ci-hovercolor1: var(--ci-hovercolor1);
@bg-hover: var(--bg-hover);
@bg-active: var(--bg-active);
@fg-hover: var(--fg-hover);

@fg-controls: var(--fg-controls);
@border: var(--border);

@bg-general: var(--bg-general);
@fg-general: var(--fg-general);
// Link colors outside of content boxes
@lk-general: var(--lk-general);
@lh-general: var(--lh-general); // hover
// Link colors in content boxes
@lk-content-box: var(--lk-content-box);
@lh-content-box: var(--lh-content-box); // hover
// Header text color
@fg-header: var(--fg-header);
@bg-content-box: var(--bg-content-box);
@fg-content-box: var(--fg-content-box);

