/*
 * Material Symbols Outlined — the Zetta Design System v1.6 icon font.
 *
 * Source: npm `@material-symbols/font-300` v0.45.9, file
 * `material-symbols-outlined.woff2` (512 KB). Committed here rather than pulled
 * from node_modules to match how this repo already self-hosts Geist, Inter and
 * the legacy Material Icons. Only the Outlined face is vendored — the package
 * also ships Rounded (614 KB) and Sharp (472 KB), which Zetta does not use.
 *
 * Zetta specifies self-hosting explicitly: no CDN. That is also a GDPR and
 * offline win.
 *
 * PAYLOAD NOTE: `font-display: block` means the browser only fetches the woff2
 * when an element actually matching `.material-symbols-outlined` renders. As of
 * P1.1 nothing does, so this adds 512 KB to the deployed assets and 0 KB to what
 * users download. It starts costing once components consume it (P1.3 onward).
 * The full icon set is vendored because subsetting is P3.4's concern.
 *
 * ---------------------------------------------------------------------------
 * TWO THINGS THAT SILENTLY BREAK THIS FONT — both handled below.
 *
 * 1. LIGATURES. This font renders icons from ligatures: the text `expand_more`
 *    becomes one glyph. If an ancestor sets `font-feature-settings`, it cascades
 *    into the icon element and suppresses ligature formation — you then see the
 *    literal string "expand_more" instead of an icon. The failure is visual only;
 *    nothing errors. `font-feature-settings: 'liga'` is therefore declared here
 *    with the STANDARD property, not only the `-webkit-` prefix that the legacy
 *    material-icons.css uses.
 *
 *    To verify: measure a rendered icon span. A glyph is roughly its font-size
 *    wide (~16px at `--icon-md`); ligature text is ~100px. Width is the reliable
 *    signal, not a screenshot glance.
 *
 * 2. AXES. This is a variable font. Zetta pins weight 300 with optical size
 *    matched to the render size, grade 0 and fill 0. Without explicit
 *    `font-variation-settings` the browser uses the font's defaults (weight 400),
 *    which renders visibly heavier than the design system specifies.
 *
 *    `FILL 1` is permitted only on an active toggle — set it locally there,
 *    never globally.
 * ---------------------------------------------------------------------------
 */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 300;
  /* `block` avoids a flash of un-ligatured text while the font loads. Once
   * self-hosted the load is local and effectively instant, so the invisibility
   * period is negligible. */
  font-display: block;
  src: url('./material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  /* Default to the design system's `md` icon size. Call sites override with
   * font-size, which is also what scales the glyph. */
  font-size: var(--icon-md, 16px);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Gotcha 1 — standard property, not just the -webkit- alias. */
  font-feature-settings: 'liga';

  /* Gotcha 2 — Zetta's axes. wght 300, optical size 24, no grade, unfilled. */
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

/* Active-toggle variant. The only case where Zetta permits a filled glyph. */
.material-symbols-outlined--filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}