/* ============================================================
   SVG Icon System v2 — Matches Design System v2 tokens
   ============================================================ */

/* Card icons */
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md, 12px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3, .75rem);
  background: var(--gold-dim, rgba(255,201,87,.12));
  transition: background var(--dur-normal, .25s) var(--ease-out, ease),
              transform var(--dur-normal, .25s) var(--ease-spring, ease);
}
.card-icon svg {
  width: 24px; height: 24px;
  stroke: var(--burgundy, #500711); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  transition: stroke var(--dur-normal, .25s);
}
.card:hover .card-icon {
  background: var(--burgundy, #500711);
  transform: scale(1.08);
}
.card:hover .card-icon svg { stroke: var(--gold, #ffc957); }

/* Doc card icons */
.doc-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm, 8px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-3, .75rem);
  background: var(--gold-dim, rgba(255,201,87,.12));
  transition: background var(--dur-normal, .25s), transform var(--dur-normal, .25s) var(--ease-spring, ease);
}
.doc-card-icon svg {
  width: 22px; height: 22px;
  stroke: var(--burgundy, #500711); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
  transition: stroke var(--dur-normal, .25s);
}
.doc-card:hover .doc-card-icon {
  background: var(--burgundy, #500711);
  transform: scale(1.08);
}
.doc-card:hover .doc-card-icon svg { stroke: var(--gold, #ffc957); }

/* Callout icons */
.callout-icon {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-right: var(--sp-2, .5rem);
}
.callout-icon svg {
  width: 20px; height: 20px;
  stroke: var(--gold, #ffc957); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}