/* DS §05.09 — Icon utility classes (web) · token-only */

.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

/* Sized variants */
.ds-icon-xs  { width: 12px; height: 12px; }
.ds-icon-sm  { width: 16px; height: 16px; }
.ds-icon-md  { width: 20px; height: 20px; }
.ds-icon-lg  { width: 24px; height: 24px; }
.ds-icon-xl  { width: 32px; height: 32px; }
.ds-icon-2xl { width: 40px; height: 40px; }

/* Color variants */
.ds-icon-primary  { color: var(--verdant-web); }
.ds-icon-muted    { color: var(--fg3); }
.ds-icon-inverse  { color: var(--surface); }
.ds-icon-danger   { color: var(--status-danger); }
.ds-icon-warn     { color: var(--status-warn); }
.ds-icon-clean    { color: var(--status-clean); }
.ds-icon-info     { color: var(--status-info); }

/* Rounded container */
.ds-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--rad-md);
  background: var(--bg2);
  color: var(--verdant-web);
  flex-shrink: 0;
}

.ds-icon-box-sm { width: var(--sp-8); height: var(--sp-8); }
.ds-icon-box-lg { width: var(--sp-12); height: var(--sp-12); border-radius: var(--rad-lg); }

.ds-icon-box-clean  { background: var(--status-clean-bg);  color: var(--status-clean-text); }
.ds-icon-box-warn   { background: var(--status-warn-bg);   color: var(--status-warn-text); }
.ds-icon-box-danger { background: var(--status-danger-bg); color: var(--status-danger-text); }
.ds-icon-box-info   { background: var(--status-info-bg);   color: var(--status-info-text); }