/* A26 Web Design System — Identity & icon foundation
   Interface symbols use theme-aware SVG filters so black source assets stay readable in light and dark mode.
   Standalone symbols invert on dark surfaces; border-only list backplates use the same theme-aware border token as groups/cards. */
@layer a26.foundation {
  :root {
    --a26-symbol-backplate-border: var(--a26-group-border, var(--a26-separator));
    --a26-list-divider-color: color-mix(in srgb, currentColor 14%, transparent);
  }
  .a26-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.15em;
    block-size: 1.15em;
    line-height: 1;
    font-weight: inherit;
    color: currentColor;
    filter: var(--a26-symbol-filter, none);
  }

  .a26-symbol[data-scale="small"] { font-size: .82em; }
  .a26-symbol[data-scale="medium"] { font-size: 1em; }
  .a26-symbol[data-scale="large"] { font-size: 1.18em; }

  .a26-symbol[data-rendering="hierarchical"] {
    color: var(--a26-text-secondary);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--a26-bg-elevated) 70%, transparent);
  }

  .a26-symbol[data-rendering="accent"] { color: var(--a26-accent); }

  .a26-icon-pair {
    display: inline-flex;
    align-items: center;
    gap: var(--a26-space-2);
  }

  .a26-interface-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--a26-space-3);
  }

  .a26-interface-icon-tile {
    min-height: 76px;
    display: grid;
    place-items: center;
    gap: var(--a26-space-1);
    padding: var(--a26-space-3);
    border-radius: var(--a26-radius-md);
    background: transparent;
    color: var(--a26-text-secondary);
    text-align: center;
    font: var(--a26-font-caption-1);
  }

  .a26-interface-icon-tile .a26-symbol {
    color: var(--a26-text-primary);
    font-size: 24px;
  }

  .a26-symbol-img,
  .a26-symbol img,
  .a26-sidebar__icon img,
  .a26-list-row__leading img,
  .a26-list-row__meta img,
  .a26-toolbar-icon-button img,
  .a26-icon-button img,
  .a26-toolbar-button img,
  .a26-menu__icon img,
  .a26-menu__check img,
  .a26-pop-up-button__chevron img,
  .a26-pull-down-button__chevron img,
  .a26-search-field__icon img,
  .a26-slider__min img,
  .a26-slider__max img,
  .a26-stepper img {
    display: block;
    inline-size: 1em;
    block-size: 1em;
    object-fit: contain;
    filter: var(--a26-symbol-filter, none);
  }

  .a26-interface-icon-tile .a26-symbol-img {
    inline-size: 24px;
    block-size: 24px;
  }

}