/**
 * Component — Empty State
 *
 * Expected HTML:
 *   <div class="ec-empty-state" data-material="water">
 *     <svg class="ec-icon ec-icon--xl" aria-hidden="true">...</svg>
 *     <p class="ec-empty-state__title">No entries yet</p>
 *     <p class="ec-empty-state__description">...</p>
 *     <button class="ec-button ec-button--secondary ec-button--sm" data-material="water">Browse competitions</button>
 *   </div>
 *
 * ec-empty-state--neutral forces the muted tone for compliance/account
 * areas (EC-DESIGN.md, Restraint) — e.g. an empty Responsible Play
 * history should never look playful, even if data-material="water" is
 * present on the element. It overrides the material colour rather than
 * just relying on the absence of one, so the neutral tone is guaranteed
 * regardless of what markup gets pasted onto this component later.
 */

.ec-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ec-space-3);
	padding: var(--ec-space-8) var(--ec-space-5);
	color: var(--ec-color-text-secondary);
}

.ec-empty-state .ec-icon {
	color: var(--ec-material-color);
	margin-bottom: var(--ec-space-2);
}

.ec-empty-state__title {
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-semibold);
	font-size: var(--ec-font-size-body-lg);
	color: var(--ec-color-text-primary);
	margin: 0;
}

.ec-empty-state__description {
	font-size: var(--ec-font-size-body-sm);
	line-height: var(--ec-line-height-base);
	margin: 0;
	max-width: 24rem;
}

.ec-empty-state--neutral .ec-icon {
	color: var(--ec-color-text-secondary);
}