/**
 * Minerva CSS Custom properties
 * ----------------------------
 * Please be aware that these properties are accessible via *any* client-side code.
 * These variables should mirror Codex design token names and values:
 * https://doc.wikimedia.org/codex/latest/design-tokens
 * Only include properties that are required for client-side modification.
 *
 * @private - Currently, these variables are only intended for use by Minerva,
 *            however, they are designed to mimic the naming convention in Codex tokens
 *            in order to facilitate an eventual migration to a centralized source.
 * @experimental
 * @since February 2024 (MediaWiki 1.43)
 * This file is kept separate from the skin.less to avoid the side effects of CSS variable conversion
 * that occurs to LESS variables when importing mediawiki.skin.variables.
 * We import mediawiki.skin.defaults to obtain the original unmodified values for these CSS variables.
 */
@import 'mediawiki.skin.defaults.less';

// Import the Codex design tokens from the “WikimediaUI” theme.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';

.light-mode-palette() {
	/* Standard Codex colors */
	--background-color-base: @background-color-base;
	--background-color-destructive: @background-color-destructive;
	--background-color-interactive: @background-color-interactive;
	--background-color-interactive-subtle: @background-color-interactive-subtle;
	--background-color-progressive-subtle: @background-color-progressive-subtle;
	--border-color-base: @border-color-base;
	--border-color-inverted: @border-color-inverted;
	--border-color-muted: @border-color-muted;
	--border-color-progressive--focus: @border-color-progressive--focus;
	--border-color-subtle: @border-color-subtle;
	--border-color-transparent: @border-color-transparent;
	--box-shadow-color-progressive--focus: @box-shadow-color-progressive--focus;
	--color-base: @color-base;
	--color-error: @color-error;
	--color-inverted: @color-inverted;
	--color-subtle: @color-subtle;

	// NOTE: The following link colors are fed *back* into MediaWiki core
	// by being used in mediawiki.skin.variables.less.
	--color-progressive: @color-progressive;
	--color-visited: @color-visited;
	--color-progressive--active: @color-progressive--active;
	--color-link: @color-progressive;
	--color-link-red: @color-link-red;
	--color-link-red--visited: @color-link-red--visited;
	--color-link-external: @color-progressive;
	--color-link-external--visited: @color-visited;
	--color-link-external--active: @color-progressive--active;
	--color-link--visited: @color-visited;
	// T357381: Note Minerva uses a different active color then the standard one.
	--color-link--active: #faa700;

	/* Minerva specific colors */
	// FIXME: Replace with Codex drop shadows
	--box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );
}

:root {
	color-scheme: dark light;
	.light-mode-palette();
}

/**
 * Placeholder Night mode color palette.
 * NOTE: These values are temporarily hard coded.
 */
.night-mode-palette() {
	--color-base: #f8f9fa;
	--color-subtle: #d4d5d5;
	--color-link: #6e85d8;
	--color-link-red: #e45d52;
	--color-progressive: #6e85d8;
	--background-color-destructive: #e45d52;
	--color-progressive--active: #afb6e9;
	--background-color-base: #101418;
	--color-visited: #977dbd;
	--background-color-interactive: #202122;
	--background-color-interactive-subtle: #202122;
	--background-color-progressive-subtle: #202122;
	--border-color-base: #2e3136;
	--border-color-inverted: #f8f9fa;
	--border-color-muted: #2e3136;
	--border-color-progressive--focus: #afb6e9;
	--border-color-subtle: #d4d5d5;
	--border-color-transparent: transparent;
	--box-shadow-color-progressive--focus: #afb6e9;
	--color-error: #e45d52;
	--color-inverted: #f8f9fa;
	--color-link-red--visited: #b97876;
	--color-link-external: #6e85d8;
	--color-link-external--visited: #b97876;
	--color-link-external--active: #2a4b8d;
	--color-link--visited: #977dbd;
	--box-shadow-color-drawer: #afb6e9;
}

.night-mode-invert() {
	color-scheme: light;
	.light-mode-palette();
	filter: invert( 1 ) hue-rotate( 180deg );
}

html.skin-night-mode-clientpref-1 {
	color-scheme: dark;
	.night-mode-palette();

	/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
	.skin-invert {
		.night-mode-invert();
	}
}

@media ( prefers-color-scheme: dark ) {
	html.skin-night-mode-clientpref-2 {
		.night-mode-palette();

		/** Content that uses the mw-invert class is inverted and the light mode palette should be used. */
		.skin-invert {
			.night-mode-invert();
		}
	}
}