/* ============================================================
   UTILITIES — NoisyPixel.com
   Single-purpose helper classes: text wrapping, color text,
   background color, typography scale, layout, positioning,
   and spacing. Not component definitions.
   ============================================================ */

/* ===== Text Wrapping ===== */
/* Text wrapping balance */
.text-balance {
	text-wrap: balance;
}

/* Hide scrollbar while preserving scroll behavior */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}
.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Letter spacing utilities for headings */
.tracking-tight-xl {
	letter-spacing: -0.03em;
}
.tracking-tight-lg {
	letter-spacing: -0.025em;
}
.tracking-tight-md {
	letter-spacing: -0.02em;
}

/* ===== Color Text Utilities ===== */
/* Used for dynamic accent coloring in FeatureCard, StatsDisplay, etc. */
.text-np-cyan {
	color: var(--np-cyan);
}
.text-np-magenta {
	color: var(--np-magenta);
}
.text-np-orange {
	color: var(--np-orange);
}
.text-np-yellow {
	color: var(--np-yellow);
}
.text-np-navy {
	color: var(--np-navy);
}
.text-np-charcoal {
	color: var(--np-charcoal);
}
.text-np-gray {
	color: var(--np-gray);
}
.text-white {
	color: white;
}
.text-white-70 {
	color: rgba(255, 255, 255, 0.7);
}
.text-white-60 {
	color: rgba(255, 255, 255, 0.6);
}
.text-white-50 {
	color: rgba(255, 255, 255, 0.5);
}

/* Missing brand color text utilities */
.text-np-bright-cyan {
	color: var(--np-bright-cyan);
}
.text-np-purple {
	color: var(--np-purple);
}
.text-white-30 {
	color: rgba(255, 255, 255, 0.3);
}
.text-white-25 {
	color: rgba(255, 255, 255, 0.25);
}

/* ===== Background Color Utilities ===== */
/* Replaces Tailwind bg-white / bg-np-* utility classes */
.bg-white {
	background-color: white;
}
.bg-np-light {
	background-color: var(--np-light);
}
.bg-np-navy {
	background-color: var(--np-navy);
}

/* ===== Typography Scale Utilities ===== */
/* Custom NoisyPixel type scale — replaces Tailwind fontSize config */
.text-h2 {
	font-size: var(--text-h2-size);
	font-weight: var(--text-h2-weight);
	letter-spacing: var(--text-h2-tracking);
	line-height: 1.15;
}
@media (max-width: 640px) {
	.text-h2 {
		font-size: var(--text-h2-mobile-size);
	}
}
.text-h3 {
	font-size: var(--text-h3-size);
	font-weight: var(--text-h3-weight);
	letter-spacing: -0.02em;
	line-height: 1.2;
}
@media (max-width: 640px) {
	.text-h3 {
		font-size: var(--text-h3-mobile-size);
	}
}
.text-h4 {
	font-size: var(--text-h4-size);
	font-weight: var(--text-h4-weight);
	line-height: 1.3;
}
.text-body-lg {
	font-size: var(--text-body-lg-size);
	line-height: 1.6;
}
.text-body {
	font-size: var(--text-body-size);
	line-height: 1.6;
}
.text-body-sm {
	font-size: var(--text-body-sm-size);
	line-height: 1.6;
}

/* ===== Layout Utilities ===== */
/* Replaces common Tailwind layout classes used across multiple pages */
.text-center {
	text-align: center;
}
.mx-auto {
	margin-inline: auto;
}
.max-w-sm {
	max-width: 24rem;
}
.max-w-md {
	max-width: 28rem;
}
.max-w-xl {
	max-width: 36rem;
}
.max-w-2xl {
	max-width: 42rem;
}
.max-w-3xl {
	max-width: 48rem;
}
.flex-shrink-0 {
	flex-shrink: 0;
}
.leading-relaxed {
	line-height: 1.625;
}

/* ===== Positioning Utilities ===== */
.relative {
	position: relative;
}
.z-10 {
	z-index: 10;
}

/* ===== Spacing Utilities ===== */
/* Commonly used margin classes that replace Tailwind mb-* / mt-* */
.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-3 {
	margin-bottom: 0.75rem;
}
.mb-4 {
	margin-bottom: 1rem;
}
.mb-6 {
	margin-bottom: 1.5rem;
}
.mb-8 {
	margin-bottom: 2rem;
}
.mb-10 {
	margin-bottom: 2.5rem;
}
.mb-12 {
	margin-bottom: 3rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.mt-4 {
	margin-top: 1rem;
}
.mt-6 {
	margin-top: 1.5rem;
}
.mt-8 {
	margin-top: 2rem;
}
.mt-10 {
	margin-top: 2.5rem;
}
.mt-12 {
	margin-top: 3rem;
}