/* Variables
--------------------------------------------------------- */
:root {
	/* =========================================================
		1. PRIMITIVES & BASE SURFACES
	========================================================= */
	--c-light: #FFFFFF;
	--c-dark:  #000000;

	--c-bg: var(--c-light);
	--c-bg-invert: var(--c-dark);

	/* --- Fonts --- */
	--ff-default: 'Metropolis', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ff-alt: 'Metropolis', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* --- Brand & Status Colors (Light Base) --- */
	--c-primary: 	#000000;
	--c-primary-alt: color-mix(in srgb, var(--c-primary) 80%, white);

	--c-secondary: 	#F8496F;
	--c-secondary-alt: color-mix(in srgb, var(--c-secondary) 90%, white);

	--c-error: 		#C84630;
	--c-error-alt: color-mix(in srgb, var(--c-error) 90%, white);

	--c-warning: 	#FCC130;
	--c-warning-alt: color-mix(in srgb, var(--c-warning) 90%, white);

	--c-success: 	#48C572;
	--c-success-alt: color-mix(in srgb, var(--c-success) 90%, white);

	--c-info: 		#639BFB;
	--c-info-alt: color-mix(in srgb, var(--c-info) 90%, white);

	/* --- Text & Neutral Surface Tokens --- */
	--c-white: var(--c-light);
	--c-white-alt: color-mix(in srgb, var(--c-white) 90%, var(--c-bg-invert));
	--c-text: #000000;
	--c-headlines: #000000;
	--c-gray: color-mix(in srgb, var(--c-text) 70%, var(--c-light));
	--c-light-gray: #9b9b9b;
	--c-lightest-gray: #F2F2F2;

	/* --- Accessibility Structural Helpers --- */
	--border-contrast: transparent;
	--box-shadow-default: 0 0 10px var(--c-bg-invert-a10);
	--box-shadow-large: 0 5px 30px var(--c-bg-invert-a25);

	/* =========================================================
		2. DEPENDENT SCALES
		(update whenever --c-bg / --c-bg-invert change)
	========================================================= */
	/* Alpha Scale */
	--c-bg-a100: var(--c-bg);
	--c-bg-a90: rgb(from var(--c-bg) r g b / 90%);
	--c-bg-a75: rgb(from var(--c-bg) r g b / 75%);
	--c-bg-a50: rgb(from var(--c-bg) r g b / 50%);
	--c-bg-a25: rgb(from var(--c-bg) r g b / 25%);
	--c-bg-a10: rgb(from var(--c-bg) r g b / 10%);
	--c-bg-a5:  rgb(from var(--c-bg) r g b / 5%);
	--c-bg-a2:  rgb(from var(--c-bg) r g b / 2%);
	--c-bg-a1:  rgb(from var(--c-bg) r g b / 1%);

	--c-bg-invert-a100: var(--c-bg-invert);
	--c-bg-invert-a90: rgb(from var(--c-bg-invert) r g b / 90%);
	--c-bg-invert-a75: rgb(from var(--c-bg-invert) r g b / 75%);
	--c-bg-invert-a50: rgb(from var(--c-bg-invert) r g b / 50%);
	--c-bg-invert-a25: rgb(from var(--c-bg-invert) r g b / 25%);
	--c-bg-invert-a10: rgb(from var(--c-bg-invert) r g b / 10%);
	--c-bg-invert-a5:  rgb(from var(--c-bg-invert) r g b / 5%);
	--c-bg-invert-a2:  rgb(from var(--c-bg-invert) r g b / 2%);
	--c-bg-invert-a1:  rgb(from var(--c-bg-invert) r g b / 1%);

	/* Mix Scale (Blend base with its opposite) */
	--c-bg-m90: color-mix(in srgb, var(--c-bg) 90%, var(--c-bg-invert));
	--c-bg-m75: color-mix(in srgb, var(--c-bg) 75%, var(--c-bg-invert));
	--c-bg-m50: color-mix(in srgb, var(--c-bg) 50%, var(--c-bg-invert));
	--c-bg-m25: color-mix(in srgb, var(--c-bg) 25%, var(--c-bg-invert));
	--c-bg-m10: color-mix(in srgb, var(--c-bg) 10%, var(--c-bg-invert));
	--c-bg-m5:  color-mix(in srgb, var(--c-bg) 5%, var(--c-bg-invert));
	--c-bg-m2:  color-mix(in srgb, var(--c-bg) 2%, var(--c-bg-invert));
	--c-bg-m1:  color-mix(in srgb, var(--c-bg) 1%, var(--c-bg-invert));

	--c-bg-invert-m90: color-mix(in srgb, var(--c-bg-invert) 90%, var(--c-bg));
	--c-bg-invert-m75: color-mix(in srgb, var(--c-bg-invert) 75%, var(--c-bg));
	--c-bg-invert-m50: color-mix(in srgb, var(--c-bg-invert) 50%, var(--c-bg));
	--c-bg-invert-m25: color-mix(in srgb, var(--c-bg-invert) 25%, var(--c-bg));
	--c-bg-invert-m10: color-mix(in srgb, var(--c-bg-invert) 10%, var(--c-bg));
	--c-bg-invert-m5:  color-mix(in srgb, var(--c-bg-invert) 5%, var(--c-bg));
	--c-bg-invert-m2:  color-mix(in srgb, var(--c-bg-invert) 2%, var(--c-bg));
	--c-bg-invert-m1:  color-mix(in srgb, var(--c-bg-invert) 1%, var(--c-bg));

	/* Flat Scale (Tint/shade toward neutral) */
	--c-bg-f90: color-mix(in srgb, var(--c-bg) 90%, black);
	--c-bg-f75: color-mix(in srgb, var(--c-bg) 75%, black);
	--c-bg-f50: color-mix(in srgb, var(--c-bg) 50%, black);
	--c-bg-f25: color-mix(in srgb, var(--c-bg) 25%, black);
	--c-bg-f10: color-mix(in srgb, var(--c-bg) 10%, black);
	--c-bg-f5:  color-mix(in srgb, var(--c-bg) 5%, black);
	--c-bg-f2:  color-mix(in srgb, var(--c-bg) 2%, black);
	--c-bg-f1:  color-mix(in srgb, var(--c-bg) 1%, black);

	--c-bg-invert-f90: color-mix(in srgb, var(--c-bg-invert) 90%, white);
	--c-bg-invert-f75: color-mix(in srgb, var(--c-bg-invert) 75%, white);
	--c-bg-invert-f50: color-mix(in srgb, var(--c-bg-invert) 50%, white);
	--c-bg-invert-f25: color-mix(in srgb, var(--c-bg-invert) 25%, white);
	--c-bg-invert-f10: color-mix(in srgb, var(--c-bg-invert) 10%, white);
	--c-bg-invert-f5:  color-mix(in srgb, var(--c-bg-invert) 5%, white);
	--c-bg-invert-f2:  color-mix(in srgb, var(--c-bg-invert) 2%, white);
	--c-bg-invert-f1:  color-mix(in srgb, var(--c-bg-invert) 1%, white);

	/* =========================================================
		3. CONTAINERS, SPACING, & LAYOUT
	========================================================= */
	--gap-default: 	25px;
	--gap-half: 	12.5px;
	--gap-default-negative: calc(var(--gap-default) * -1);
	--gap-half-negative: 	calc(var(--gap-half) * -1);

	--container-width: 		1440px;
	--container-width-s: 	1080px;
	--container-width-xs: 	767px;
	--container-width-xxs: 	544px;

	--scrollbar-width: 10px;
	--container-outer-width: calc(var(--container-width) + (var(--gap-default) * 2));
	--screen-sides: calc(100vw - var(--container-outer-width));
	--screen-side: calc(var(--screen-sides) / 2);
	--scrollbar-width-half: calc(var(--scrollbar-width) / 2);

	--space-xxl: 	clamp(10rem, -0.270rem + 13.500vw, 20rem);
	--space-xl: 	clamp(8rem, -0.216rem + 10.800vw, 16rem);
	--space-l: 		clamp(6rem, -0.162rem + 8.100vw, 12rem);
	--space-m: 		clamp(4rem, -0.108rem + 5.400vw, 8rem);
	--space-s: 		clamp(2rem, -0.054rem + 2.700vw, 4rem);
	--space-xs: 	clamp(1rem, -0.027rem + 1.400vw, 2rem);

	/* --- Typography & Scale --- */
	--fs-xl: 	clamp(2.0rem, 1.767rem + 0.600vw, 2.6rem);
	--fs-l: 	clamp(1.8rem, 1.567rem + 0.600vw, 2.4rem);
	--fs-m: 	clamp(1.6rem, 1.522rem + 0.200vw, 1.8rem);
	--fs-s: 	clamp(1.4rem, 1.322rem + 0.200vw, 1.6rem);
	--fs-xs: 	clamp(1.2rem, 1.122rem + 0.200vw, 1.4rem);

	--ls-l: 0.20rem;
	--ls-m: 0.10rem;
	--ls-s: 0.05rem;

	--lh-l: 1.6;
	--lh-m: 1.4;
	--lh-s: 1.2;

	/* --- Transitions --- */
	--a-easing-default: ease;
	--a-timing-default: 0.3s;
	--transition: all var(--a-timing-default) var(--a-easing-default);
	
	--a-easing-slow: ease-in-out;
	--a-timing-slow: 0.6s;
	--transition-slow: all var(--a-timing-slow) var(--a-easing-slow);
	
	--a-distance: 40px;
	
	/* --- Misc --- */
	--border-radius-default: 0px;
	--border-radius-large: 	 14px;

	--ul-list-style-width: 	0.3em;
	--ul-list-style-height: 0.3em;
	--ul-list-style-radius: 50%;

	--header-height: 160px;
}

/* =========================================================
	4. THEME OVERRIDES (Nested)
========================================================= */

html {
	/* -----------------------------------------------------
		Dark Mode Base
	----------------------------------------------------- */
	&[data-color-theme="dark"] {
		--c-bg: var(--c-dark);
		--c-bg-invert: var(--c-light);

		--c-white: var(--c-dark);
		--c-text: var(--c-light);
		--c-headlines: var(--c-light);
		--c-lightest-gray: color-mix(in srgb, var(--c-bg) 80%, black);

		/* Status colors tuned for dark backgrounds */
		/*
		--c-primary:	#2F6AFD;
		--c-secondary: 	#F8496F;
		--c-error: 		#C84630;
		--c-success: 	#48C572;
		--c-warning: 	#FCC130;
		--c-info: 		#639BFB;
		*/

		& .sticky-nav header#main-header {
			box-shadow: 0 -5px 20px 0 rgba(0, 0, 0, .4);
		}
		& header#main-header.has-light-logo #logo-light {
			display: inline-block;
		}
		& header#main-header.has-light-logo #logo-default {
			display: none;
		}
	}

	/* -----------------------------------------------------
		High Contrast Mode (Light Base)
	----------------------------------------------------- */
	&[data-contrast="high"] {
		--c-light: #FFFFFF;
		--c-dark: #000000;

		--c-bg: var(--c-light);
		--c-bg-invert: var(--c-dark);

		--c-text: var(--c-dark);
		--c-headlines: var(--c-dark);
		
		/*
		--c-primary:	#2F6AFD;
		--c-secondary: 	#F8496F;
		--c-error: 		#C84630;
		--c-success: 	#48C572;
		--c-warning: 	#FCC130;
		--c-info: 		#639BFB;
		*/

		/* Enforce high-contrast borders and disable soft shadows */
		--border-contrast: 2px solid #000000;
		--box-shadow-default: none;
		--box-shadow-large: none;

		/* -------------------------------------------------
			High Contrast Mode + Dark Mode Combined
		------------------------------------------------- */
		&[data-color-theme="dark"] {
			--c-bg: var(--c-dark);       	/* #000000 */
			--c-bg-invert: var(--c-light); 	/* #FFFFFF */

			--c-text: var(--c-light);
			--c-headlines: var(--c-light);
			/*
			--c-primary:	#2F6AFD;
			--c-secondary: 	#F8496F;
			--c-error: 		#C84630;
			--c-success: 	#48C572;
			--c-warning: 	#FCC130;
			--c-info: 		#639BFB;
			*/

			--border-contrast: 2px solid #FFFFFF;
			--box-shadow-default: none;
			--box-shadow-large: none;
		}
	}
}

/* =========================================================
	5. MEDIA QUERIES & SPECIAL CLASSES
========================================================= */

@media (max-width: 1080px) {
	:root { --header-height: 158px; }
}

@media (max-width: 767px) {
	:root { --header-height: 135px; }
}

/* Windows High Contrast Mode (OS Forced Colors) */
@media (forced-colors: active) {
	:root {
		--border-contrast: 1px solid CanvasText;
	}
}

/* --- Inverted background text color swap --- */
/* Inverts text based on the active inverted background token */
.bg-invert {
	--c-text: var(--c-bg);
	--c-headlines: var(--c-bg);
	color: var(--c-text);

	& :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
		color: var(--c-headlines);
	}
}

html[data-color-theme="dark"] .bg-invert {
	--c-text: #404040;
	--c-headlines: #000000;
}
html[data-color-theme="dark"][data-contrast="high"] .bg-invert {
	--c-text: #000000;
	--c-headlines: #000000;
}