/*!
 * Sarv Catalyst — Utilities
 *
 * A deliberately short list. A utility class earns its place only when it is
 * used in more than one component and expresses a design-system decision.
 *
 * Everything here maps to a token. No magic numbers, no colour literals.
 */

/* ---------------------------------------------------------------------------
 * Visually hidden but available to assistive technology
 * ------------------------------------------------------------------------- */

.sc-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

.sc-text-lead {
	font-size: var(--sc-font-size-lg);
	line-height: var(--sc-line-height-snug);
	color: var(--sc-color-text-muted);
	max-inline-size: var(--sc-measure);
}

.sc-text-small {
	font-size: var(--sc-font-size-sm);
	line-height: var(--sc-line-height-normal);
}

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

.sc-text-eyebrow {
	font-family: var(--sc-font-family-heading);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-brand);
}

/* Balanced headings and non-orphaned last lines. */
.sc-text-balance {
	text-wrap: balance;
}

.sc-text-pretty {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Measure
 * ------------------------------------------------------------------------- */

.sc-measure {
	max-inline-size: var(--sc-measure);
}

.sc-measure-content {
	max-inline-size: var(--sc-container-content);
}

/* ---------------------------------------------------------------------------
 * Colour roles
 *
 * Only the safe combinations are exposed. In particular there is no
 * `sc-text-brand-light`, because #42BBE6 cannot carry text on a light surface.
 * ------------------------------------------------------------------------- */

.sc-color-brand {
	color: var(--sc-color-brand);
}

.sc-color-brand-strong {
	color: var(--sc-color-brand-strong);
}

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

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

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

.sc-surface--subtle {
	background-color: var(--sc-color-brand-subtle);
}

/* ---------------------------------------------------------------------------
 * Spacing
 *
 * Only top-level rhythm. Component-internal spacing belongs to the component.
 * ------------------------------------------------------------------------- */

.sc-mt-0 {
	margin-block-start: 0;
}

.sc-mt-sm {
	margin-block-start: var(--sc-space-sm);
}

.sc-mt-md {
	margin-block-start: var(--sc-space-md);
}

.sc-mt-lg {
	margin-block-start: var(--sc-space-lg);
}

.sc-mb-0 {
	margin-block-end: 0;
}

.sc-mb-md {
	margin-block-end: var(--sc-space-md);
}

.sc-mb-lg {
	margin-block-end: var(--sc-space-lg);
}

.sc-p-block-md {
	padding-block: var(--sc-space-md);
}

/* ---------------------------------------------------------------------------
 * Layout helpers
 * ------------------------------------------------------------------------- */

.sc-full-width {
	inline-size: 100%;
}

.sc-align-start {
	text-align: start;
}

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

.sc-hidden {
	display: none;
}

/* Hide only where the layout has an equivalent alternative. */
@media (width <= 47.999rem) {
	.sc-hide-mobile {
		display: none;
	}
}

@media (width >= 48rem) {
	.sc-hide-desktop {
		display: none;
	}
}