/**
 * Utility Classes
 *
 * @package Papagid
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════
   Display Utilities
   ═══════════════════════════════════════════════════════════ */

.hidden {
	display: none !important;
}

.block {
	display: block !important;
}

.flex {
	display: flex !important;
}

.inline-flex {
	display: inline-flex !important;
}

.grid {
	display: grid !important;
}

/* ═══════════════════════════════════════════════════════════
   Spacing Utilities
   ═══════════════════════════════════════════════════════════ */

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

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

.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.pt-4 { padding-top: var(--space-4) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pr-4 { padding-right: var(--space-4) !important; }

/* ═══════════════════════════════════════════════════════════
   Text Utilities
   ═══════════════════════════════════════════════════════════ */

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

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

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

.text-primary {
	color: var(--color-text-primary) !important;
}

.text-secondary {
	color: var(--color-text-secondary) !important;
}

.text-muted {
	color: var(--color-text-muted) !important;
}

.text-brand {
	color: var(--color-brand-primary) !important;
}

.text-inverse {
	color: var(--color-text-inverse) !important;
}

/* Font Weights */
.font-regular {
	font-weight: var(--font-weight-regular) !important;
}

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

.font-semibold {
	font-weight: var(--font-weight-semibold) !important;
}

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

/* ═══════════════════════════════════════════════════════════
   Background Utilities
   ═══════════════════════════════════════════════════════════ */

.bg-pink {
	background: var(--color-bg-pink) !important;
}

.bg-lavender {
	background: var(--color-bg-lavender) !important;
}

.bg-teal {
	background: var(--color-bg-teal) !important;
}

.bg-subtle {
	background: var(--color-bg-subtle) !important;
}

.bg-surface {
	background: var(--color-bg-surface) !important;
}

/* ═══════════════════════════════════════════════════════════
   No-JS Warning Specific Styles
   ═══════════════════════════════════════════════════════════ */

.no-js-warning {
	background: var(--color-sand-100);
	border: 2px solid var(--color-health-warning);
	border-radius: var(--radius-lg);
	padding: var(--spacing-component-lg);
	margin: var(--spacing-component-lg) var(--space-4);
	text-align: center;
}

.no-js-warning p {
	margin: 0;
	color: var(--color-text-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
}