/* ============================================================
   FOUNDATIONS — icons.css   (documented in icons.md)

   Google's Material Symbols, the whole set. ROUNDED is the house
   style; Outlined and Sharp are loaded too, for comparing or a
   one-off. All three are variable fonts: fill, weight, grade and
   optical size are dials, not separate icon sets.

   Usage — the icon's name IS the content (a ligature):
     <span class="ms">home</span>
     <span class="ms ms--fill">star</span>
     <span class="ms ms--outlined">home</span>
     <span class="ms" style="--ms-size:16px">close</span>

   Browse names: https://fonts.google.com/icons?icon.style=Rounded

   Loaded from Google Fonts (needs a connection). A family's font
   file only downloads once something on the page uses it, so the
   unused two cost nothing. display=block keeps icon NAMES from
   flashing as text before the font arrives.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root {
  /* Defaults for every icon; override per icon or per component. */
  --ms-size: 20px;
  --ms-fill: 0;      /* 0 = outline, 1 = filled (e.g. an active nav item) */
  --ms-wght: 400;    /* 100–700; 300 reads lighter next to 13px text */
  --ms-grad: 0;      /* -50–200; nudge -25 on dark backgrounds to even out glow */
  --ms-opsz: 20;     /* 20–48; keep it matched to the rendered size */
}
[data-theme="dark"] { --ms-grad: -25; }
[data-theme="light"] { --ms-grad: 0; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: var(--ms-size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' var(--ms-fill),
    'wght' var(--ms-wght),
    'GRAD' var(--ms-grad),
    'opsz' var(--ms-opsz);
}

/* Styles */
.ms--outlined { font-family: 'Material Symbols Outlined'; }
.ms--sharp    { font-family: 'Material Symbols Sharp'; }

/* Common dials */
.ms--fill  { --ms-fill: 1; }
.ms--light { --ms-wght: 300; }
.ms--bold  { --ms-wght: 600; }
.ms--sm    { --ms-size: 16px; }
.ms--lg    { --ms-size: 24px; --ms-opsz: 24; }