/* =============================================================================
   Icon system — docs/components/icon-system.md, docs/redesign/edtech/contracts.md §4

   <svg class="icon icon--24" aria-hidden="true">
     <use href="assets/icons/sprite.svg#ph-student"/>
   </svg>

   Colour always comes from currentColor: set `color` on the parent, never a
   fill or stroke literal. Sizes are 16 / 24 / 32 only.
   ============================================================================= */

.icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  color: currentColor;
  fill: currentColor;
}

/* Phosphor Regular symbols are stroke-based and carry their own fill="none",
   so the fill above only reaches the custom marks, which need it. */
.icon--16 { width: var(--space-4); height: var(--space-4); }
.icon--24 { width: var(--space-6); height: var(--space-6); }
.icon--32 { width: var(--space-8); height: var(--space-8); }

/* ---------------------------------------------------------------------------
   Icon badge — an icon centred in a rounded square. Card headers, division
   cards, feature lists. 48/24 default, 64/32 big, 40/24 compact.
   --------------------------------------------------------------------------- */
.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--border-radius-md);
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
  transition: transform var(--duration-moderate) var(--ease-standard);
}

/* The badge's default icon size. Wrapped in :where() so it is 0,0,0 and an
   explicit .icon--16 / --24 / --32 on the icon always wins. */
:where(.icon-badge .icon),
:where(.icon-badge > svg) {
  width: var(--space-6);
  height: var(--space-6);
}

.icon-badge--big {
  width: var(--space-16);
  height: var(--space-16);
}

:where(.icon-badge--big .icon),
:where(.icon-badge--big > svg) {
  width: var(--space-8);
  height: var(--space-8);
}

.icon-badge--compact {
  width: var(--space-10);
  height: var(--space-10);
}

:where(.icon-badge--compact .icon),
:where(.icon-badge--compact > svg) {
  width: var(--space-6);
  height: var(--space-6);
}

/* Variants */
.icon-badge--pale {
  background-color: var(--color-primary-pale);
  color: var(--color-primary);
}

.icon-badge--division {
  background-color: var(--color-division-brand);
  color: var(--color-white);
}

/* Icon emphasis inside a hovered clickable card — motion.md § Distance and
   Transform Tokens, scale(1.1) over --duration-moderate. `.card--hover` belongs
   to package 3.3; this rule only reads it as hover context, at zero
   specificity, so that package stays free to override. */
:where(.card--hover):hover .icon-badge {
  transform: scale(1.1);
}