/**
 * Primitive — Icon
 *
 * Expected HTML: <svg class="ec-icon ec-icon--md" aria-hidden="true">...</svg>
 *
 * Icon delivery (Phosphor Icons, per EC-DESIGN-SYSTEM.md) — self-hosted
 * SVGs, a sprite, or a webfont — is not decided yet and is out of scope
 * for the primitive layer. This file only establishes the sizing and
 * stroke-weight contract any icon markup will consume once that's
 * decided; stroke-width names (thin/regular/bold) are chosen to match
 * Phosphor's own weight variants.
 *
 * Size and stroke-weight are primitive-local tokens — not part of the
 * Foundations layer, since no existing scale maps cleanly onto icon
 * dimensions — but are still declared once, at :root, rather than
 * repeated as literals.
 */

:root {
	--ec-icon-size-sm: 1rem;    /* 16px */
	--ec-icon-size-md: 1.25rem; /* 20px */
	--ec-icon-size-lg: 1.5rem;  /* 24px */
	--ec-icon-size-xl: 2rem;    /* 32px */

	--ec-icon-stroke-thin: 1;
	--ec-icon-stroke-regular: 1.5;
	--ec-icon-stroke-bold: 2;
}

.ec-icon {
	display: inline-block;
	flex-shrink: 0;
	width: var(--ec-icon-size-md);
	height: var(--ec-icon-size-md);
	stroke-width: var(--ec-icon-stroke-regular);
	stroke: currentColor;
	fill: none;
	color: inherit;
}

.ec-icon--sm {
	width: var(--ec-icon-size-sm);
	height: var(--ec-icon-size-sm);
}

.ec-icon--md {
	width: var(--ec-icon-size-md);
	height: var(--ec-icon-size-md);
}

.ec-icon--lg {
	width: var(--ec-icon-size-lg);
	height: var(--ec-icon-size-lg);
}

.ec-icon--xl {
	width: var(--ec-icon-size-xl);
	height: var(--ec-icon-size-xl);
}

.ec-icon--thin {
	stroke-width: var(--ec-icon-stroke-thin);
}

.ec-icon--bold {
	stroke-width: var(--ec-icon-stroke-bold);
}

/* Filled-glyph icons (Phosphor, EC_Icon — the icon delivery decision,
   2026-10-01). Phosphor draws every weight as filled outlines on a
   256 grid rather than strokes, so the base stroke contract above
   doesn't apply to them. Additive: stroke-drawn icons (HQ's inline
   chevrons/hamburger) are unaffected. */
.ec-icon--fill {
	fill: currentColor;
	stroke: none;
}