/* TD icons — size rule from Figma (see tokens.css --td-icon-*) */
.td-icon { display: inline-block; flex: none; vertical-align: middle; color: inherit; fill: none; }
.td-icon-14 { width: 14px; height: 14px; }            /* chips */
.td-icon-16 { width: var(--td-icon-16); height: var(--td-icon-16); } /* 12–13px text */
.td-icon-20 { width: var(--td-icon-20); height: var(--td-icon-20); } /* 14–17px text; 32–36 tile */
.td-icon-24 { width: var(--td-icon-24); height: var(--td-icon-24); } /* 18–20px text; 40–48 tile */
/* two-tone: accent parts of the icon follow --td-icon-accent (fallback: currentColor) */
.td-icon.is-accent { --td-icon-accent: var(--td-color-accent); }
/* icons on light buttons are blue */
.btn-secondary .td-icon, .btn-ghost .td-icon, .btn-icon-only .td-icon,
.td-btn-light .td-icon, .td-btn-secondary .td-icon, .td-btn-ghost .td-icon { color: var(--td-color-accent); }
/* icons on primary / filled buttons stay white */
.btn-primary .td-icon, .td-btn-primary .td-icon { color: var(--td-color-text-on-accent); --td-icon-accent: currentColor; }
.btn-danger .td-icon, .td-btn-danger .td-icon { color: var(--td-color-danger); }