/**
 * Indigo Theme - Main Stylesheet
 *
 * Compiled from modular CSS architecture.
 * Generated: All CSS modules combined in this file.
 */

/* ========================================================================
   DESIGN TOKENS & VARIABLES
   ======================================================================== */
@import 'variables.css';

/* ========================================================================
   BASE STYLES
   ======================================================================== */
@import 'base/reset.css';
@import 'base/utilities.css';

/* ========================================================================
   LAYOUT SYSTEM
   ======================================================================== */
@import 'layout/grid.css';
@import 'layout/container.css';

/* ========================================================================
   COMPONENTS
   ======================================================================== */
@import 'components/button.css';

/* ========================================================================
   CRITICAL STYLES
   ======================================================================== */

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--color-primary);
	color: white;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	z-index: var(--z-modal);
}

.skip-to-content:focus {
	top: 0;
}

/* Responsive images */
img,
picture {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Video containers */
iframe,
video {
	max-width: 100%;
	height: auto;
}

/* Common responsive patterns */
@media (max-width: 640px) {
	body {
		font-size: var(--fs-base);
	}

	h1 {
		font-size: var(--fs-3xl);
	}

	h2 {
		font-size: var(--fs-2xl);
	}

	h3 {
		font-size: var(--fs-xl);
	}
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */

@media print {
	* {
		background: transparent;
		color: black;
		box-shadow: none;
		text-shadow: none;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
	}

	button,
	input,
	textarea {
		display: none;
	}

	.no-print,
	[data-no-print] {
		display: none !important;
	}
}

/* ========================================================================
   COMPONENT OVERRIDES & ENHANCEMENTS
   ======================================================================== */

/* Card component */
.card {
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--transition-base);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
}

.card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Form controls */
input,
textarea,
select {
	font-size: 16px; /* Prevents zoom on iOS */
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-pale);
}

/* ========================================================================
   LOADING & LAZY-LOAD STATES
   ======================================================================== */

[data-lazy-src],
[data-lazy-iframe] {
	opacity: 0.5;
	transition: opacity var(--transition-base);
}

[data-lazy-src].is-loaded,
[data-lazy-iframe].is-loaded {
	opacity: 1;
}

/* ========================================================================
   ANIMATION DEFINITIONS
   ======================================================================== */

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		transform: translateY(10px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.animate-fade-in {
	animation: fadeIn var(--transition-base) ease-out;
}

.animate-slide-in {
	animation: slideIn var(--transition-base) ease-out;
}