/**
 * Icons Bundle — Material Symbols
 * Vanilla Breeze · Icon Font System
 *
 * Material Symbols Outlined variable font with four axes:
 * FILL (0–1), wght (100–700), GRAD (−50–200), opsz (20–48).
 * Context-aware: icon weight and optical size track surrounding text.
 */

/* ===== FONT (outside @layer) ===== */

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('./fonts/material-symbols-outlined.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ===== @property registrations (outside @layer) ===== */

@property --vb-icon-fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --vb-icon-weight {
  syntax: "<number>";
  inherits: true;
  initial-value: 400;
}

@property --vb-icon-grad {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --vb-icon-opsz {
  syntax: "<number>";
  inherits: true;
  initial-value: 24;
}

/* ===== Icon base class + context rules ===== */

@layer web-components {

  /* ── Base icon ── */
  .vb-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings:
      'FILL' var(--vb-icon-fill),
      'wght' var(--vb-icon-weight),
      'GRAD' var(--vb-icon-grad),
      'opsz' var(--vb-icon-opsz);
    transition:
      --vb-icon-fill 0.2s ease,
      --vb-icon-weight 0.2s ease,
      --vb-icon-grad 0.2s ease;
  }

  /* ── Context-aware weight + optical size ── */

  /* Headings: heavier weight, larger optical size */
  h1 .vb-icon,
  h2 .vb-icon {
    --vb-icon-weight: 600;
    --vb-icon-opsz: 48;
  }

  h3 .vb-icon,
  h4 .vb-icon {
    --vb-icon-weight: 500;
    --vb-icon-opsz: 40;
  }

  /* Buttons inherit the text weight context */
  button .vb-icon,
  [role="button"] .vb-icon {
    --vb-icon-weight: var(--vb-font-weight, 400);
  }

  /* Small/caption contexts: smaller optical size */
  small .vb-icon,
  caption .vb-icon,
  figcaption .vb-icon,
  .vb-icon[data-size="sm"] {
    --vb-icon-opsz: 20;
  }

  /* Large standalone icons */
  .vb-icon[data-size="lg"] {
    font-size: 2em;
    --vb-icon-opsz: 40;
  }

  .vb-icon[data-size="xl"] {
    font-size: 3rem;
    --vb-icon-opsz: 48;
  }

  /* ── Fill on hover (declarative) ── */
  [data-vb-icon-fill="hover"] .vb-icon,
  [data-vb-icon-fill="hover"].vb-icon {
    --vb-icon-fill: 0;
  }

  [data-vb-icon-fill="hover"]:hover .vb-icon,
  [data-vb-icon-fill="hover"].vb-icon:hover {
    --vb-icon-fill: 1;
  }

  /* ── Always filled variant ── */
  .vb-icon[data-fill],
  .vb-icon.filled {
    --vb-icon-fill: 1;
  }

  /* ── Accessibility ── */
  .vb-icon[aria-hidden="true"] {
    speak: never;
  }

  /* ── Dark mode grade adjustment ── */
  @media (prefers-color-scheme: dark) {
    .vb-icon {
      --vb-icon-grad: -25;
    }
  }

  [data-mode="dark"] .vb-icon {
    --vb-icon-grad: -25;
  }

  /* ── Print: static, no transitions ── */
  @media print {
    .vb-icon {
      transition: none;
    }
  }
}