/**
 * SDC Theme Utility Classes
 *
 * Reusable utility primitives for common patterns
 *
 * @package SDC_Theme
 * @since 0.1.0
 */

/* ========================================
   GLASSMORPHISM UTILITIES
   ======================================== */

.glass {
	background-color: var(--color-glass);
	backdrop-filter: var(--backdrop-blur);
	-webkit-backdrop-filter: var(--backdrop-blur);
}

.glass-light {
	background-color: var(--color-glass-light);
	backdrop-filter: var(--backdrop-blur);
	-webkit-backdrop-filter: var(--backdrop-blur);
}

/* ========================================
   COLOR UTILITIES
   ======================================== */

.color-primary {
	color: var(--color-primary);
}

.color-secondary {
	color: var(--color-secondary);
}

.color-tertiary {
	color: var(--color-tertiary);
}

.color-accent {
	color: var(--color-accent);
}

.color-base {
	color: var(--color-base);
}

.color-contrast {
	color: var(--color-contrast);
}

.color-muted {
	color: var(--color-muted);
}

/* Background colors */
.bg-primary {
	background-color: var(--color-primary);
}

.bg-secondary {
	background-color: var(--color-secondary);
}

.bg-tertiary {
	background-color: var(--color-tertiary);
}

.bg-accent {
	background-color: var(--color-accent);
}

.bg-base {
	background-color: var(--color-base);
}

.bg-contrast {
	background-color: var(--color-contrast);
}

.bg-muted {
	background-color: var(--color-muted);
}

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

/* Padding */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

/* Padding X axis */
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* Padding Y axis */
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Gap */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ========================================
   BORDER RADIUS UTILITIES
   ======================================== */

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

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

.container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 720px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--site-padding);
	padding-right: var(--site-padding);
}

.container-wide {
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

/* ========================================
   TEXT UTILITIES
   ======================================== */

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-capitalize {
	text-transform: capitalize;
}

/* Font weights */
.font-regular {
	font-weight: var(--font-weight-regular);
}

.font-medium {
	font-weight: var(--font-weight-medium);
}

.font-demi {
	font-weight: var(--font-weight-demi-bold);
}

.font-bold {
	font-weight: var(--font-weight-bold);
}

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}