/**
 * Component — Error State
 *
 * Three distinct cases (EC-DESIGN-SYSTEM.md) sharing one visual
 * language — always the danger token, never Fire. This file never
 * references --ec-material-* at all, by design: an error state can't
 * accidentally inherit Fire from an ancestor's data-material if it
 * never reads the material alias layer in the first place.
 *
 * Expected HTML:
 *   Inline (field validation): <p class="ec-error-inline">This field is required.</p>
 *   Full (system/network):
 *     <div class="ec-error-state">
 *       <svg class="ec-icon ec-icon--xl" aria-hidden="true">...</svg>
 *       <p class="ec-error-state__title">Something went wrong</p>
 *       <p class="ec-error-state__description">...</p>
 *     </div>
 *   404/permission: as above, with ec-error-state--large added.
 */

.ec-error-inline {
	display: flex;
	align-items: center;
	gap: var(--ec-space-1);
	margin: var(--ec-space-1) 0 0;
	color: var(--ec-color-danger);
	font-size: var(--ec-font-size-caption);
}

.ec-error-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-error-state .ec-icon {
	color: var(--ec-color-danger);
	margin-bottom: var(--ec-space-2);
}

.ec-error-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-error-state__description {
	font-size: var(--ec-font-size-body-sm);
	line-height: var(--ec-line-height-base);
	margin: 0;
	max-width: 24rem;
}

.ec-error-state--large .ec-error-state__title {
	font-size: var(--ec-font-size-h3);
}