/* ==========================================================================
   Utilities — Small reusable helper classes
   Prefix with sc- to avoid collisions.
   ========================================================================== */

/* ── Visibility ──────────────────────────────────────────────────────────── */

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

.sc-hidden {
	display: none;
}

/* ── Layout helpers ──────────────────────────────────────────────────────── */

.sc-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

.sc-flex-center-y {
	display: flex;
	align-items: center;
}

.sc-flex-gap-sm {
	gap: var(--sc-space-sm);
}

.sc-flex-gap-md {
	gap: var(--sc-space-md);
}

/* ── Text alignment ──────────────────────────────────────────────────────── */

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

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

/* ── Text styles ─────────────────────────────────────────────────────────── */

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

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

.sc-text-sm {
	font-size: var(--sc-text-sm);
}

.sc-text-lg {
	font-size: var(--sc-text-lg);
}

/* ── Spacing ─────────────────────────────────────────────────────────────── */

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

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

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

.sc-mb-sm {
	margin-bottom: var(--sc-space-sm);
}

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

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

/* ── Content width ───────────────────────────────────────────────────────── */

.sc-content-width {
	max-width: var(--sc-width-content);
	margin-inline: auto;
}

.sc-wide-width {
	max-width: var(--sc-width-wide);
	margin-inline: auto;
}

/* ── Truncation ──────────────────────────────────────────────────────────── */

.sc-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Avatar Color Utilities ─────────────────────────────────────────────── */

.avatar--rust       { background-color: var(--sc-rust); }
.avatar--rust-soft  { background-color: var(--sc-rust-soft); }
.avatar--terracotta { background-color: var(--sc-terracotta); }
.avatar--sage       { background-color: var(--sc-sage); }
.avatar--sage-light { background-color: var(--sc-sage-light); }
.avatar--moss       { background-color: var(--sc-moss); }
.avatar--bark       { background-color: var(--sc-bark); }
.avatar--bark-light { background-color: var(--sc-bark-light); }
.avatar--bark-faint { background-color: var(--sc-bark-faint); }
.avatar--charcoal   { background-color: var(--sc-charcoal); }
.avatar--sand       { background-color: var(--sc-sand); }
.avatar--plum       { background-color: var(--sc-plum); }
.avatar--storm      { background-color: var(--sc-storm); }
.avatar--slate      { background-color: var(--sc-slate); }