/* ============================================================
   Spetz icon system — Material Symbols (Rounded)
   ------------------------------------------------------------
   The single source for functional UI icons across Spetz.

   Usage:
     <span class="mdi" aria-hidden="true">lightbulb</span>
     <span class="mdi mdi--fill mdi--20">favorite</span>

   - The text inside the span IS the icon name (a font ligature).
     Browse names at https://fonts.google.com/icons (set style: Rounded).
   - Always mark decorative icons aria-hidden="true"; for an icon that
     is the only label of a control, give the control an aria-label.
   - Size with the mdi--NN helpers (or set font-size). Color via the
     parent's `color` (icons inherit currentColor).
   - mdi--fill switches to the solid variant.

   NOTE: functional icons only. The brand's geometric SHAPES
   (circle / square / triangle / dot / dotted line) are a separate
   vocabulary — keep those as SVG/CSS, don't replace them with icons.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0');

.mdi {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;          /* default; override with mdi--NN */
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Solid (filled) variant. */
.mdi--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Weight helpers (optional fine-tuning). */
.mdi--light { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.mdi--bold  { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }

/* Size helpers — pick the one matching the surrounding text/control. */
.mdi--14 { font-size: 14px; }
.mdi--16 { font-size: 16px; }
.mdi--18 { font-size: 18px; }
.mdi--20 { font-size: 20px; }
.mdi--24 { font-size: 24px; }
.mdi--28 { font-size: 28px; }
.mdi--32 { font-size: 32px; }
.mdi--40 { font-size: 40px; }
.mdi--48 { font-size: 48px; }