/* ============================================
   BASE STYLES
   Variables, Reset, Typography
   ============================================ */

:root {
	/* Color Palette */
	--sterling-silver: #b7bcc2;
	--deep-slate: #434a54;
	--mountain-blue: #2e5d89;
	--lake-mist: #e7eef3;
	--warm-copper: #c67133;
	/* RGBA Variants */
	--sterling-silver-rgba: rgba(183, 188, 194, 1);
	--deep-slate-rgba: rgba(67, 74, 84, 1);
	--mountain-blue-rgba: rgba(46, 93, 137, 1);
	--lake-mist-rgba: rgba(231, 238, 243, 1);
	--warm-copper-rgba: rgba(198, 113, 51, 1);

	/* Semantic Colors */
	--brand-color: var(--sterling-silver);
	--primary-color: var(--deep-slate);
	--primary-text-color: var(--lake-mist);
	--secondary-color: var(--mountain-blue);
	--accent-color: var(--warm-copper);
	--highlight-color: var(--sterling-silver);
	--background-color: var(--lake-mist);
	--text-color: #333;

	/* Gradients */
	--trust-overlay-gradient: linear-gradient(
		135deg,
		rgba(67, 74, 84, 0.92) 0%,
		rgba(231, 238, 243, 0.88) 100%
	);
	--trust-fallback-gradient: linear-gradient(
		135deg,
		var(--primary-color) 0%,
		var(--secondary-color) 100%
	);
	--service-overlay-gradient: linear-gradient(
		135deg,
		var(--slate-overlay-70) 0%,
		var(--mountain-overlay-70) 100%
	);
	--carousel-overlay-gradient: linear-gradient(
		135deg,
		var(--slate-overlay-30) 0%,
		var(--mountain-overlay-30) 100%
	);
	--hero-overlay-gradient: linear-gradient(
		135deg,
		var(--slate-overlay-85) 0%,
		var(--mountain-overlay-75) 100%
	);
	--icon-gradient: linear-gradient(
		135deg,
		var(--secondary-color),
		var(--primary-color)
	);
	--stats-gradient: linear-gradient(
		135deg,
		var(--accent-color),
		var(--warm-copper)
	);
	--about-text-gradient: linear-gradient(
		135deg,
		var(--lake-mist) 0%,
		rgba(231, 238, 243, 0.5) 100%
	);
	--vignette-gradient: radial-gradient(
		ellipse at center,
		transparent 0%,
		var(--overlay-black-20) 100%
	);

	/* Typography */
	--primary-font: 'Montserrat', sans-serif;
	--secondary-font: 'Source Sans 3', sans-serif;
	--accent-font: 'Lora', serif;

	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;

	/* Layout */
	--header-height: 70px;
	--border-radius: 4px;
	--border-width: 1px;
	--border-width-md: 2px;
	--border-width-lg: 3px;
	--border-width-xl: 4px;

	/* Container Max Widths */
	--container-sm: 700px;
	--container-md: 900px;
	--container-lg: 1200px;
	--container-xl: 1400px;

	/* Icon Sizes */
	--icon-xxs: 16px;
	--icon-xs: 24px;
	--icon-sm: 32px;
	--icon-md: 40px;
	--icon-lg: 56px;
	--icon-xl: 64px;
	--icon-xxl: 80px;

	/* Section Heights */
	--section-height-sm: 400px;
	--section-height-md: 500px;
	--section-height-lg: 600px;

	/* Element Heights */
	--element-height-xs: 220px;
	--element-height-sm: 250px;
	--element-height-md: 280px;
	--element-height-lg: 350px;

	/* Logo Height */
	--logo-height: 180px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;

	/* Shadows */
	--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
	--shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.18);

	/* Text Shadows */
	--text-shadow-sm: 1px 1px 2px rgba(0, 0, 0, 0.3);
	--text-shadow-md: 2px 2px 4px rgba(0, 0, 0, 0.3);
	--text-shadow-lg: 2px 2px 8px rgba(0, 0, 0, 0.3);

	/* Overlay Colors */
	--overlay-black-10: rgba(0, 0, 0, 0.1);
	--overlay-black-15: rgba(0, 0, 0, 0.15);
	--overlay-black-20: rgba(0, 0, 0, 0.2);
	--overlay-black-30: rgba(0, 0, 0, 0.3);
	--overlay-white-10: rgba(255, 255, 255, 0.1);
	--overlay-white-20: rgba(255, 255, 255, 0.2);

	/* Component-specific Overlays */
	--blue-overlay-light: rgba(43, 96, 137, 0.05);
	--blue-overlay-medium: rgba(43, 96, 137, 0.3);
	--slate-overlay-30: rgba(67, 74, 84, 0.3);
	--slate-overlay-70: rgba(67, 74, 84, 0.7);
	--slate-overlay-85: rgba(67, 74, 84, 0.85);
	--mountain-overlay-30: rgba(46, 93, 137, 0.3);
	--mountain-overlay-70: rgba(46, 93, 137, 0.7);
	--mountain-overlay-75: rgba(46, 93, 137, 0.75);
	--copper-overlay-30: rgba(198, 113, 51, 0.3);

	/* Images */
	--trust-bg-image: url('../images/photos/industrial-deep-clean.png?q=80&w=1000&auto=format&fit=crop');

	/* Service Card Images */
	--service-contract-image: url('../images/photos/contract.jpg?q=80&w=800&auto=format&fit=crop');
	--service-construction-image: url('../images/photos/construction.jpg?q=80&w=800&auto=format&fit=crop');
	--service-movein-image: url('../images/photos/movein.jpg?q=80&w=800&auto=format&fit=crop');

	/* Carousel/Industry Images */
	--carousel-healthcare-image: url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?q=80&w=1200&auto=format&fit=crop');
	--carousel-retail-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?q=80&w=1200&auto=format&fit=crop');
	--carousel-manufacturing-image: url('https://images.unsplash.com/photo-1565793298595-6a879b1d9492?q=80&w=1200&auto=format&fit=crop');
	--carousel-office-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=1200&auto=format&fit=crop');

	/* About Us Images */
	--about-image-1: url('../images/photos/our-service-1.jpg?q=80&w=1000&auto=format&fit=crop');
	--about-image-2: url('../images/photos/our-service-2.png?q=80&w=1000&auto=format&fit=crop');
	--about-image-3: url('../images/photos/our-service-3.jpg?q=80&w=1000&auto=format&fit=crop');

	/* Hero Background */
	--hero-bg-image: url('../images/photos/hero.jpg?q=80&w=1000&auto=format&fit=crop');
}

/* Reset */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--secondary-font);
	font-weight: 400;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.business-branding-bold {
	font-family: var(--primary-font);
	font-weight: 700;
}

.business-branding-regular {
	font-family: var(--primary-font);
	font-weight: 400;
}

.heading-text {
	font-family: var(--primary-font);
	font-weight: 600;
}

.body-text {
	font-family: var(--secondary-font);
	font-weight: 400;
}

.body-text-bold {
	font-family: var(--secondary-font);
	font-weight: 600;
}

.accent-text {
	font-family: var(--accent-font);
	font-weight: 400;
}

.accent-text-italic {
	font-family: var(--accent-font);
	font-weight: 400;
	font-style: italic;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

main {
	flex: 1;
}

/* ============================================
   Call to Action Buttons
   ============================================ */
.cta-button {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: 1.1rem;
	font-weight: 600;
	font-family: var(--secondary-font);
	text-decoration: none;
	border-radius: calc(var(--border-radius) * 2);
	transition: transform var(--transition-fast),
		box-shadow var(--transition-fast);
	cursor: pointer;
	border: var(--border-width) solid transparent;
}

.cta-button:hover {
	transform: translateY(calc(var(--spacing-xs) / -2));
	box-shadow: var(--shadow-xl);
}

.cta-button:focus-visible {
	outline: calc(var(--border-width) * 1.5) solid var(--accent-color);
	outline-offset: calc(var(--border-width) * 1.5);
}

.cta-primary {
	background: var(--accent-color);
	color: white;
	border-color: var(--accent-color);
}

.cta-primary:hover {
	background: var(--warm-copper);
	filter: brightness(1.1);
}

.cta-secondary {
	background: transparent;
	color: var(--primary-text-color);
	border-color: var(--primary-text-color);
	border-width: 4px;
}

.cta-secondary:hover {
	background: var(--overlay-white-10);
}