/*
 * La Galga Gris · utilities.css
 * Utilidades pequeñas y composables. Mantener disciplina: si una utility se repite >3 veces como conjunto, promover a componente.
 */

/* Text */
.lgg-text-center { text-align: center; }
.lgg-text-balance { text-wrap: balance; }
.lgg-text-pretty { text-wrap: pretty; }
.lgg-text-muted { color: var(--color-ink-muted); }
.lgg-text-secondary { color: var(--color-ink-secondary); }
.lgg-text-accent { color: var(--color-accent); }
.lgg-text-inverse { color: var(--color-ink-inverse); }

.lgg-font-display { font-family: var(--font-display); font-weight: var(--fw-medium); letter-spacing: var(--ls-display); }
.lgg-font-body    { font-family: var(--font-body); }
.lgg-italic       { font-style: italic; }

/* Backgrounds */
.lgg-bg-base    { background: var(--color-bg-base); }
.lgg-bg-subtle  { background: var(--color-bg-subtle); }
.lgg-bg-card    { background: var(--color-bg-card); }
.lgg-bg-inverse { background: var(--color-bg-inverse); color: var(--color-ink-inverse); }

/* Borders */
.lgg-border        { border: 1px solid var(--color-border-default); }
.lgg-border-subtle { border: 1px solid var(--color-border-subtle); }
.lgg-border-top    { border-top: 1px solid var(--color-border-subtle); }
.lgg-border-bottom { border-bottom: 1px solid var(--color-border-subtle); }
.lgg-rounded       { border-radius: var(--radius-md); }
.lgg-rounded-lg    { border-radius: var(--radius-lg); }
.lgg-rounded-pill  { border-radius: var(--radius-pill); }

/* Shadows */
.lgg-shadow-sm { box-shadow: var(--shadow-sm); }
.lgg-shadow-md { box-shadow: var(--shadow-md); }
.lgg-shadow-lg { box-shadow: var(--shadow-lg); }

/* Chips / badges */
.lgg-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-pill);
	background: var(--color-accent-soft);
	color: var(--color-accent-hover);
	font-size: var(--fz-micro);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}
.lgg-chip--ink    { background: var(--color-ink-primary); color: var(--color-ink-inverse); }
.lgg-chip--ghost  { background: transparent; border: 1px solid var(--color-border-default); color: var(--color-ink-secondary); }

/* Microcopy */
.lgg-microcopy {
	color: var(--color-ink-muted);
	font-size: var(--fz-small);
	line-height: 1.5;
}

/* Visually hidden helper alt */
.lgg-visually-hidden {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Motion entrance helpers (state classes para que JS active reveal) */
.lgg-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--dur-slow) var(--ease-out-quart),
				transform var(--dur-slow) var(--ease-out-quart);
	will-change: opacity, transform;
}
.lgg-reveal.is-in {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.lgg-reveal { opacity: 1; transform: none; transition: none; }
}