/*
 * Tiara icon scale — single source of truth for mobile-v2 (and shared header load).
 *
 * Do not copy these tokens into tiara/00-tokens.css, tiara.css, or template_ux.
 * Edit only this file when changing the ladder for version 2.
 *
 * Assets stay on a shared optical grid (typically 24×24 viewBox). Display size
 * is chosen from this ladder so icons stay proportional to each other.
 *
 * Scale:
 *   sm  16px  dense / meta actions
 *   md  24px  default chrome glyph
 *   lg  32px  emphasis glyph
 *   xl  40px  large control frame / hit chrome (not a denser glyph artboard)
 *
 * Usage:
 *   width: var(--tiara-icon-size-md);
 *   <img class="tiara-icon tiara-icon--md" src="...svg" alt="" aria-hidden="true">
 *   <svg class="tiara-icon tiara-icon--md" ...>...</svg>
 *
 * Prefer tokens inside component CSS. Utility classes are for one-off markup.
 * Do not invent ad-hoc 18/20/28px icon boxes when a ladder step fits.
 */

:root {
  --tiara-icon-size-sm: 16px;
  --tiara-icon-size-md: 24px;
  --tiara-icon-size-lg: 32px;
  --tiara-icon-size-xl: 40px;
}

.tiara-icon,
.tiara-icon--md {
  display: block;
  box-sizing: border-box;
  flex: 0 0 var(--tiara-icon-size-md);
  width: var(--tiara-icon-size-md);
  height: var(--tiara-icon-size-md);
  object-fit: contain;
  object-position: center;
}

.tiara-icon--sm {
  flex: 0 0 var(--tiara-icon-size-sm);
  width: var(--tiara-icon-size-sm);
  height: var(--tiara-icon-size-sm);
}

.tiara-icon--lg {
  flex: 0 0 var(--tiara-icon-size-lg);
  width: var(--tiara-icon-size-lg);
  height: var(--tiara-icon-size-lg);
}

.tiara-icon--xl {
  flex: 0 0 var(--tiara-icon-size-xl);
  width: var(--tiara-icon-size-xl);
  height: var(--tiara-icon-size-xl);
}

/* Inline SVG inherits box size; keep strokes from stretching oddly. */
svg.tiara-icon {
  overflow: visible;
}