/* =============================================================================
   COMPONENT: icon-tile — the Dusk signature for "category": a rounded tinted
   square holding a single lucide glyph. Marks settings rows, care-plan groups,
   and notification kinds. Default is the calm accent tint; status variants use
   the matching status tint so color still means status (always with the glyph
   AND a text label beside it in the row).
   ========================================================================== */
@layer components {
  .icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent);
  }

  .icon-tile--sm { inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-sm); }
  .icon-tile--lg { inline-size: 2.75rem; block-size: 2.75rem; }

  .icon-tile--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
  .icon-tile--success { background: var(--status-success-bg); color: var(--status-success-fg); }
  .icon-tile--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
  .icon-tile--danger  { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
}