/* ============================================================
   Continuum Health AI — Icon System v1
   Per icon-system-v1/spec/usage.md (Nadia Cortez, 2026-05-20)

   Usage:
     <link rel="stylesheet" href="/assets/icons.css">
     <svg class="ch-icon" aria-hidden="true" viewBox="0 0 24 24"
          fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
       <!-- inline path data here -->
     </svg>

   For icon-only buttons / functional icons: drop aria-hidden, add
   aria-label on the parent button OR role="img" + aria-label on the
   svg itself (see usage.md "Accessibility Rules").
============================================================ */

.ch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;       /* 24px — canonical size */
  height: 1.5rem;
  color: var(--text-dark, #1a1a2e);
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Size variants ── */
.ch-icon--xs  { width: 1rem;    height: 1rem;    }  /* 16px — inline with body */
.ch-icon--sm  { width: 1.25rem; height: 1.25rem; }  /* 20px — sidebar nav */
.ch-icon--md  { width: 1.5rem;  height: 1.5rem;  }  /* 24px — default (already on base) */
.ch-icon--lg  { width: 2rem;    height: 2rem;    }  /* 32px — feature cards, empty states */
.ch-icon--xl  { width: 3rem;    height: 3rem;    }  /* 48px — hero blocks */

/* ── Color variants ── */
.ch-icon--accent      { color: var(--teal, #00b37e); }
.ch-icon--nav         { color: var(--navy, #1a3a4d); opacity: 0.6; }
.ch-icon--nav-active  { color: var(--teal, #00b37e); opacity: 1;   }
.ch-icon--on-dark     { color: #fff; opacity: 0.9; }
.ch-icon--error       { color: #DC2626; }
.ch-icon--warning     { color: #D97706; }
.ch-icon--success     { color: var(--teal, #00b37e); }
.ch-icon--disabled    { color: var(--text-dark, #1a1a2e); opacity: 0.3; }
.ch-icon--muted       { color: var(--text-dark, #1a1a2e); opacity: 0.5; }

/* ── Inline spacing helpers (common pattern: icon before text) ── */
.ch-icon + * { margin-left: 0.5rem; }
.ch-icon-trailing { margin-left: 0.5rem; margin-right: 0; }