/* ══════════════════════════════════════════════════════════════
   ICON SYSTEM — Phosphor Icons Integration
   ══════════════════════════════════════════════════════════════
   Base set: Phosphor Icons (phosphoricons.com)
   Default weight: Regular (2px)
   Duotone: Selective — only on icons with enclosed/bounded shapes
   Colors: Inherits via CSS custom properties (mode-aware)

   Usage:
     <svg class="ds-icon">...</svg>
     <svg class="ds-icon ds-icon--sm">...</svg>
     <svg class="ds-icon ds-icon--duotone">...</svg>
     <button class="ds-btn"><svg class="ds-icon ds-icon--sm">...</svg> Label</button>
   ══════════════════════════════════════════════════════════════ */

/* ── Base Icon ── */
.ds-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  flex-shrink: 0;
}

/* ── Size Scale ── */
.ds-icon--xs  { width: 14px; height: 14px; }
.ds-icon--sm  { width: 18px; height: 18px; }
/* default: 24px */
.ds-icon--lg  { width: 32px; height: 32px; }
.ds-icon--xl  { width: 48px; height: 48px; }

/* ── Duotone Accent ──
   Phosphor duotone SVGs have paths with opacity="0.2" for the
   secondary fill. This rule recolors that fill with the mode's
   accent-primary token at 40% opacity.

   Only apply ds-icon--duotone on icons with enclosed shapes:
   folder, user, calendar, bell, eye, settings, trash, filter, chart, etc.
   Do NOT apply on pure-stroke icons: close, plus, chevron, arrows, etc.
   ────────────────────────────────────────────────────────────── */
.ds-icon--duotone [opacity="0.2"] {
  fill: var(--accent-primary) !important;
  opacity: 0.4 !important;
}

/* Secondary accent variant */
.ds-icon--duotone-secondary [opacity="0.2"] {
  fill: var(--accent-secondary, var(--accent-primary)) !important;
  opacity: 0.4 !important;
}

/* ── Color Variants ── */
.ds-icon--muted    { color: var(--text-muted); }
.ds-icon--tertiary { color: var(--text-tertiary); }
.ds-icon--secondary { color: var(--text-secondary); }
.ds-icon--primary  { color: var(--text-primary); }
.ds-icon--accent   { color: var(--accent-primary); }

/* ── Semantic Colors ── */
.ds-icon--success  { color: var(--semantic-success, #7ab07a); }
.ds-icon--warning  { color: var(--semantic-warning, #e0a458); }
.ds-icon--error    { color: var(--semantic-error, #c75050); }
.ds-icon--info     { color: var(--semantic-info, #5b8fb9); }

/* ── Interactive State ──
   Icons inside interactive elements inherit hover/active states.
   These classes are for standalone interactive icons (icon buttons). */
.ds-icon--interactive {
  cursor: pointer;
  transition: color 0.15s ease;
}

.ds-icon--interactive:hover {
  color: var(--text-primary);
}

.ds-icon--interactive:active {
  color: var(--accent-primary);
}