/* ============================================================
   URBINO · ICON
   Atomic component. Lucide icons, single-system, predictable size + color.

   Two valid render modes:
   (1) Inline SVG  — color via currentColor (preferred when color matters)
   (2) <img src="lucide-static…">  — color via filter helpers (faster prototyping)

   The class system below is render-mode-agnostic; the same .u-icon--16
   sets size regardless of which mode you used.
   ============================================================ */

.u-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: inherit;
}
/* Inline SVG: inherits currentColor — Lucide ships with stroke="currentColor". */
svg.u-icon { stroke: currentColor; fill: none; }

/* ---------- SIZE SCALE ---------- */
.u-icon--12 { width: 12px; height: 12px; }
.u-icon--14 { width: 14px; height: 14px; }
.u-icon--16 { width: 16px; height: 16px; }   /* default — mgr 36px control */
.u-icon--18 { width: 18px; height: 18px; }
.u-icon--20 { width: 20px; height: 20px; }   /* cit default control */
.u-icon--24 { width: 24px; height: 24px; }   /* cit lg, tabs */
.u-icon--28 { width: 28px; height: 28px; }   /* cit xl CTAs */
.u-icon--32 { width: 32px; height: 32px; }
.u-icon--40 { width: 40px; height: 40px; }   /* feature tiles, hero markers */

/* ---------- COLOR HELPERS (for <img> render mode only) ----------
   Inline SVG should use currentColor on a parent element instead.
   These filter recipes recolor a black single-path SVG to a target. */

.u-icon--white   { filter: brightness(0) invert(1); }
.u-icon--brand   { filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(2240%) hue-rotate(218deg) brightness(95%); }
.u-icon--muted   { filter: brightness(0) saturate(100%) invert(54%) sepia(11%) saturate(434%) hue-rotate(178deg) brightness(91%); }   /* ≈ slate-500 */
.u-icon--danger  { filter: brightness(0) saturate(100%) invert(20%) sepia(83%) saturate(2960%) hue-rotate(353deg) brightness(94%); }   /* ≈ red-700 */
.u-icon--success { filter: brightness(0) saturate(100%) invert(35%) sepia(85%) saturate(485%) hue-rotate(116deg) brightness(96%); }    /* ≈ green-700 */
.u-icon--warning { filter: brightness(0) saturate(100%) invert(42%) sepia(99%) saturate(720%) hue-rotate(15deg) brightness(94%); }    /* ≈ amber-700 */


/* ============================================================
   ICON-TILE — square bg container around an icon. Used in feature
   shortcuts, category-tiles, hero-headers (the "blue rounded house
   tile" pattern on the citizen mobile top bar).
   ============================================================ */

.u-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--u-radius-lg);                       /* 14 — close to legacy 12, on-scale */
  width: 44px; height: 44px;
  background: var(--u-surface-sunk);
  color: var(--u-fg-2);
}
.u-icon-tile--sm { width: 32px; height: 32px; border-radius: var(--u-radius-sm); }   /* 8 */
.u-icon-tile--lg { width: 56px; height: 56px; border-radius: var(--u-radius-lg); }   /* 14 */

/* Tone variants — match the citizen home pastel shortcut tiles */
.u-icon-tile--brand   { background: var(--u-blue-100);   color: var(--u-blue-700); }
.u-icon-tile--success { background: var(--u-green-100);  color: var(--u-green-700); }
.u-icon-tile--warning { background: var(--u-amber-100);  color: var(--u-amber-700); }
.u-icon-tile--danger  { background: var(--u-red-100);    color: var(--u-red-700); }
.u-icon-tile--violet  { background: var(--u-violet-100); color: var(--u-violet-700); }
.u-icon-tile--teal    { background: var(--u-teal-100);   color: var(--u-teal-700); }
.u-icon-tile--solid   { background: var(--u-primary);   color: var(--u-fg-inv); }