/**
 * Utility Classes
 * Layout helpers, display utilities, and responsive helpers.
 * Keep utilities single-purpose and composable.
 * Version: 0.1.0
 */

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

/* Fluid typography scale applied to headings */
h1,
.h1 {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	margin-bottom: var(--space-6);
}

h2,
.h2 {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	margin-bottom: var(--space-5);
}

h3,
.h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--space-4);
}

h4,
.h4 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--space-4);
}

h5,
.h5 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-normal);
	margin-bottom: var(--space-3);
}

h6,
.h6 {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	margin-bottom: var(--space-3);
}

/* Body text defaults */
body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-background);
}

/* SVG : Text on a path */
.slim-text-path {
	height: 100px;
	overflow: hidden;
	display: flex;
	align-items: end;
}

/* Text utilities */
.text-xs {
	font-size: var(--font-size-xs);
}
.text-sm {
	font-size: var(--font-size-sm);
}
.text-base {
	font-size: var(--font-size-base);
}
.text-lg {
	font-size: var(--font-size-lg);
}
.text-xl {
	font-size: var(--font-size-xl);
}
.text-2xl {
	font-size: var(--font-size-2xl);
}
.text-3xl {
	font-size: var(--font-size-3xl);
}

.font-light {
	font-weight: var(--font-weight-light);
}
.font-regular {
	font-weight: var(--font-weight-regular);
}
.font-medium {
	font-weight: var(--font-weight-medium);
}
.font-semibold {
	font-weight: var(--font-weight-semibold);
}
.font-bold {
	font-weight: var(--font-weight-bold);
}

.text-primary {
	color: var(--color-primary);
}
.text-secondary {
	color: var(--color-secondary);
}
.text-muted {
	color: var(--color-text-muted);
}
.text-accent {
	color: var(--color-accent);
}

/* ============================================
   LINK UTILITIES
   ============================================ */
a {
	color: var(--color-primary);
	text-decoration: underline;
}
a:hover {
	color: var(--color-primary-dark);
}
a:focus {
	outline: none;
}
a:focus-visible {
	outline: var(--focus-ring-offset) solid var(--focus-ring-color);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Container utilities */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

@media (min-width: 640px) {
	.container {
		max-width: var(--container-sm);
	}
}

@media (min-width: 768px) {
	.container {
		max-width: var(--container-md);
		padding-left: var(--space-6);
		padding-right: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--container-lg);
		padding-left: var(--space-8);
		padding-right: var(--space-8);
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: var(--container-xl);
	}
}

@media (min-width: 1536px) {
	.container {
		max-width: var(--container-2xl);
	}
}

/* Max-width utilities */
.max-w-sm {
	max-width: var(--container-sm);
}
.max-w-md {
	max-width: var(--container-md);
}
.max-w-lg {
	max-width: var(--container-lg);
}
.max-w-xl {
	max-width: var(--container-xl);
}
.max-w-2xl {
	max-width: var(--container-2xl);
}
.max-w-full {
	max-width: 100%;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Margin utilities */
.m-0 {
	margin: var(--space-0);
}
.m-1 {
	margin: var(--space-1);
}
.m-2 {
	margin: var(--space-2);
}
.m-3 {
	margin: var(--space-3);
}
.m-4 {
	margin: var(--space-4);
}
.m-6 {
	margin: var(--space-6);
}
.m-8 {
	margin: var(--space-8);
}
.m-auto {
	margin: auto;
}

.mt-0 {
	margin-top: var(--space-0);
}
.mt-2 {
	margin-top: var(--space-2);
}
.mt-4 {
	margin-top: var(--space-4);
}
.mt-6 {
	margin-top: var(--space-6);
}
.mt-8 {
	margin-top: var(--space-8);
}
.mt-12 {
	margin-top: var(--space-12);
}
.mt-16 {
	margin-top: var(--space-16);
}

.mb-0 {
	margin-bottom: var(--space-0);
}
.mb-2 {
	margin-bottom: var(--space-2);
}
.mb-4 {
	margin-bottom: var(--space-4);
}
.mb-6 {
	margin-bottom: var(--space-6);
}
.mb-8 {
	margin-bottom: var(--space-8);
}
.mb-12 {
	margin-bottom: var(--space-12);
}
.mb-16 {
	margin-bottom: var(--space-16);
}

.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Padding utilities */
.p-0 {
	padding: var(--space-0);
}
.p-2 {
	padding: var(--space-2);
}
.p-4 {
	padding: var(--space-4);
}
.p-6 {
	padding: var(--space-6);
}
.p-8 {
	padding: var(--space-8);
}

.py-2 {
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}
.py-4 {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}
.py-6 {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.py-8 {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}
.py-12 {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}
.py-16 {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.px-2 {
	padding-left: var(--space-2);
	padding-right: var(--space-2);
}
.px-4 {
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}
.px-6 {
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}
.px-8 {
	padding-left: var(--space-8);
	padding-right: var(--space-8);
}

/* ============================================
   DISPLAY & FLEXBOX UTILITIES
   ============================================ */

.block {
	display: block;
}
.inline-block {
	display: inline-block;
}
.inline {
	display: inline;
}
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}
.grid {
	display: grid;
}
.hidden {
	display: none;
}

/* Flex utilities */
.flex-row {
	flex-direction: row;
}
.flex-col {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}

.items-start {
	align-items: flex-start;
}
.items-center {
	align-items: center;
}
.items-end {
	align-items: flex-end;
}
.items-stretch {
	align-items: stretch;
}

.justify-start {
	justify-content: flex-start;
}
.justify-center {
	justify-content: center;
}
.justify-end {
	justify-content: flex-end;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}

.gap-2 {
	gap: var(--space-2);
}
.gap-4 {
	gap: var(--space-4);
}
.gap-6 {
	gap: var(--space-6);
}
.gap-8 {
	gap: var(--space-8);
}

/* ============================================
   STACK UTILITY (Vertical Rhythm)
   ============================================ */

.stack > * + * {
	margin-top: var(--space-4);
}

.stack--sm > * + * {
	margin-top: var(--space-2);
}

.stack--lg > * + * {
	margin-top: var(--space-8);
}

.stack--xl > * + * {
	margin-top: var(--space-12);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Mobile-first responsive display */
@media (max-width: 767px) {
	.md\:hidden {
		display: none;
	}
}

@media (min-width: 768px) {
	.hidden-md {
		display: none;
	}
	.md\:block {
		display: block;
	}
	.md\:flex {
		display: flex;
	}
}

@media (min-width: 1024px) {
	.hidden-lg {
		display: none;
	}
	.lg\:block {
		display: block;
	}
	.lg\:flex {
		display: flex;
	}
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus visible styles */
*:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Skip to main content link */
.skip-link {
	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-tooltip);
}

.skip-link:focus {
	top: 0;
}