/* =========================================================
 * Tech Resolve — Core Design System
 * Version: 1.0.0
 * ======================================================= */


/* =========================================================
 * Design Tokens
 * ======================================================= */

:root {

	/* -----------------------------------------------------
	 * Brand
	 * --------------------------------------------------- */

	--tr-green: #19e078;
	--tr-green-deep: #08b95d;
	--tr-green-soft: #b9f8d5;

	/* -----------------------------------------------------
	 * Dark
	 * --------------------------------------------------- */

	--tr-black: #05090e;
	--tr-dark: #071018;
	--tr-dark-2: #0b151e;
	--tr-dark-3: #111d27;

	/* -----------------------------------------------------
	 * Light
	 * --------------------------------------------------- */

	--tr-white: #ffffff;
	--tr-light: #f7f9f8;
	--tr-light-2: #eef3f1;
	--tr-cream: #faf9f5;

	/* -----------------------------------------------------
	 * Text
	 * --------------------------------------------------- */

	--tr-text-dark: #111c21;
	--tr-text-muted: #68767d;

	--tr-text-light: #f5f8f7;
	--tr-text-light-muted: #9eabb1;

	/* -----------------------------------------------------
	 * Spectral Colors
	 * Used later for Hero mouse interaction.
	 * --------------------------------------------------- */

	--tr-spectrum-green: #13ee78;
	--tr-spectrum-cyan: #14d7e8;
	--tr-spectrum-blue: #3978ff;
	--tr-spectrum-violet: #8757ff;
	--tr-spectrum-pink: #ef54bd;
	--tr-spectrum-orange: #ff8b45;

	/* -----------------------------------------------------
	 * Borders
	 * --------------------------------------------------- */

	--tr-border-dark: rgba(255, 255, 255, 0.09);
	--tr-border-light: rgba(8, 25, 30, 0.09);

	/* -----------------------------------------------------
	 * Radius
	 * --------------------------------------------------- */

	--tr-radius-xs: 8px;
	--tr-radius-sm: 12px;
	--tr-radius-md: 18px;
	--tr-radius-lg: 24px;
	--tr-radius-xl: 32px;

	/* -----------------------------------------------------
	 * Layout
	 * --------------------------------------------------- */

	--tr-container: 1380px;
	--tr-container-wide: 1540px;
	--tr-container-narrow: 960px;

	--tr-gutter: clamp(18px, 2.4vw, 36px);

	/* -----------------------------------------------------
	 * Shadows
	 * --------------------------------------------------- */

	--tr-shadow-soft:
		0 24px 70px rgba(3, 12, 18, 0.08);

	--tr-shadow-dark:
		0 30px 100px rgba(0, 0, 0, 0.34);

	/* -----------------------------------------------------
	 * Motion
	 * --------------------------------------------------- */

	--tr-ease:
		cubic-bezier(0.22, 1, 0.36, 1);

	--tr-ease-out:
		cubic-bezier(0.16, 1, 0.3, 1);

	--tr-duration-fast: 180ms;
	--tr-duration: 380ms;
	--tr-duration-slow: 700ms;
}


/* =========================================================
 * Reusable Containers
 * ======================================================= */

.tr-container {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container)
	);
	margin-inline: auto;
}


.tr-container-wide {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);
	margin-inline: auto;
}


.tr-container-narrow {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-narrow)
	);
	margin-inline: auto;
}


/* =========================================================
 * Accessibility
 * ======================================================= */

.tr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.techresolve-site *,
	.techresolve-site *::before,
	.techresolve-site *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}