/* ===========================================================================
 * F04 — Icon.
 *
 * §7: 24px outline, 1.8px stroke, rounded caps and joins. The stroke lives on
 * the partial; the box lives here. Every icon draws in `currentColor` so the
 * gold/white distinction is carried by the parent — an icon inside an outline
 * button is gold because the button is, not because anything set it.
 * ======================================================================== */

.icon {
  flex: none;
  display: block;
}

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* §7's neutral case: an icon that is decoration rather than an affordance
   sits at 75% white, so it never competes with the label beside it. */
.icon--neutral { color: var(--text-tertiary); }
.icon--gold { color: var(--text-gold); }