/**
 * Fluent 2 design tokens (Microsoft Fluent UI v2).
 * https://react.fluentui.dev/?path=/docs/theme-colors--docs
 *
 * Theme resolution:
 *  - default (:root) is the light theme;
 *  - the media query applies the dark theme automatically (theme = auto);
 *  - body.mv-theme-light / body.mv-theme-dark force a theme (admin setting).
 */

:root {
	/* Typography */
	--mv-font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--mv-font-size-100: 10px;
	--mv-font-size-200: 12px;
	--mv-font-size-300: 14px;
	--mv-font-size-400: 16px;
	--mv-font-size-500: 20px;
	--mv-font-size-600: 24px;
	--mv-font-size-700: 28px;
	--mv-font-size-800: 32px;
	--mv-font-weight-regular: 400;
	--mv-font-weight-medium: 500;
	--mv-font-weight-semibold: 600;
	--mv-font-weight-bold: 700;
	--mv-line-height-300: 20px;
	--mv-line-height-400: 22px;
	--mv-line-height-500: 28px;
	--mv-line-height-600: 32px;

	/* Brand */
	--mv-color-brand-background: #0f6cbd;
	--mv-color-brand-background-hover: #115ea3;
	--mv-color-brand-background-pressed: #0c3b5e;
	--mv-color-brand-foreground: #0f6cbd;
	--mv-color-brand-foreground-hover: #115ea3;
	--mv-color-brand-stroke: #0f6cbd;

	/* Neutrals */
	--mv-color-background-1: #ffffff;
	--mv-color-background-2: #f5f5f5;
	--mv-color-background-3: #ebebeb;
	--mv-color-background-4: #e0e0e0;
	--mv-color-background-5: #d6d6d6;
	--mv-color-background-6: #cccccc;
	--mv-color-foreground-1: #242424;
	--mv-color-foreground-2: #424242;
	--mv-color-foreground-3: #616161;
	--mv-color-foreground-4: #707070;
	--mv-color-foreground-disabled: #bdbdbd;
	--mv-color-stroke-1: #d1d1d1;
	--mv-color-stroke-2: #e0e0e0;

	/* Status */
	--mv-color-success: #0e700e;
	--mv-color-warning: #bc4b09;
	--mv-color-danger: #b10e1c;

	/* Radius */
	--mv-radius-small: 2px;
	--mv-radius-medium: 4px;
	--mv-radius-large: 6px;
	--mv-radius-xlarge: 8px;
	--mv-radius-circular: 10000px;

	/* Elevation */
	--mv-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);

	/* Spacing */
	--mv-space-2: 2px;
	--mv-space-4: 4px;
	--mv-space-6: 6px;
	--mv-space-8: 8px;
	--mv-space-10: 10px;
	--mv-space-12: 12px;
	--mv-space-16: 16px;
	--mv-space-20: 20px;
	--mv-space-24: 24px;
	--mv-space-32: 32px;

	/* Motion */
	--mv-duration-ultra-fast: 50ms;
	--mv-duration-faster: 100ms;
	--mv-duration-fast: 150ms;
	--mv-duration-normal: 200ms;
	--mv-curve-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
}

/* Dark palette. */
@media (prefers-color-scheme: dark) {
	:root {
		--mv-color-background-1: #1f1f1f;
		--mv-color-background-2: #141414;
		--mv-color-background-3: #2b2b2b;
		--mv-color-background-4: #333333;
		--mv-color-background-5: #3d3d3d;
		--mv-color-background-6: #474747;
		--mv-color-foreground-1: #ffffff;
		--mv-color-foreground-2: #d6d6d6;
		--mv-color-foreground-3: #adadad;
		--mv-color-foreground-4: #919191;
		--mv-color-stroke-1: #4d4d4d;
		--mv-color-stroke-2: #3d3d3d;
		--mv-color-brand-background: #479ef5;
		--mv-color-brand-foreground: #479ef5;
		--mv-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
		--mv-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
		--mv-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
		--mv-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
	}
}

/* Forced dark theme (admin setting = dark). */
body.mv-theme-dark {
	--mv-color-background-1: #1f1f1f;
	--mv-color-background-2: #141414;
	--mv-color-background-3: #2b2b2b;
	--mv-color-background-4: #333333;
	--mv-color-background-5: #3d3d3d;
	--mv-color-background-6: #474747;
	--mv-color-foreground-1: #ffffff;
	--mv-color-foreground-2: #d6d6d6;
	--mv-color-foreground-3: #adadad;
	--mv-color-foreground-4: #919191;
	--mv-color-stroke-1: #4d4d4d;
	--mv-color-stroke-2: #3d3d3d;
	--mv-color-brand-background: #479ef5;
	--mv-color-brand-foreground: #479ef5;
	--mv-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
	--mv-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
	--mv-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
	--mv-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.24);
	color-scheme: dark;
}

/* Forced light theme (admin setting = light), overriding the media query. */
body.mv-theme-light {
	--mv-color-background-1: #ffffff;
	--mv-color-background-2: #f5f5f5;
	--mv-color-background-3: #ebebeb;
	--mv-color-background-4: #e0e0e0;
	--mv-color-background-5: #d6d6d6;
	--mv-color-background-6: #cccccc;
	--mv-color-foreground-1: #242424;
	--mv-color-foreground-2: #424242;
	--mv-color-foreground-3: #616161;
	--mv-color-foreground-4: #707070;
	--mv-color-stroke-1: #d1d1d1;
	--mv-color-stroke-2: #e0e0e0;
	--mv-color-brand-background: #0f6cbd;
	--mv-color-brand-foreground: #0f6cbd;
	--mv-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	--mv-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 2px rgba(0, 0, 0, 0.12);
	color-scheme: light;
}