/**
 * IconTile and Icon (0.36.0, B-FP-475 § 14.5 nr. 7): an icon from the shared
 * fixed list (src/components/icons.ts) on a small, light colour tile, with the
 * icon in a stronger shade of the same colour. Always decorative
 * (`aria-hidden`); the text next to it carries the meaning.
 *
 * Colour families (`data-ut-tone`) are the Accordion icon families (0.33.0):
 * `brand`, `info`, `neutral` and `warm` reuse existing roles; `teal`, `plum`
 * and `rose` are the decorative families. Their values are declared here as
 * well as in ut-accordion-icon.css, so either sheet works alone;
 * scripts/check-contrast.mjs asserts the two sheets hold the same values and
 * that every icon/tile pair is at least 3:1 (WCAG 1.4.11).
 *
 * Dark theme: under the structural `[data-theme="dark"] .ut-ui` hook tile and
 * icon swap, which keeps the same ratio.
 *
 * Its own registered handle `ut-ui-core-icon-tile` (depends on `ut-ui-core`),
 * NOT part of dist/ui-core.css, so the base stylesheet and the
 * rendered-profile approvals bound to its bytes stay unchanged.
 */

.ut-ui {
  --ut-tone-teal: #1F6F6A;
  --ut-tone-teal-surface: #E1F1EF;
  --ut-tone-plum: #6B4E9B;
  --ut-tone-plum-surface: #EFE9F7;
  --ut-tone-rose: #A3405A;
  --ut-tone-rose-surface: #F8E6EB;
}

/* The bare icon: one em, line art in the current text colour. */
.ut-ui-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ut-ui-icon-tile {
  --ut-icon-tile-fg: var(--ut-neutral);
  --ut-icon-tile-surface: var(--ut-neutral-surface);
  --ut-icon-tile-size: 2.5rem;
  --ut-icon-tile-glyph: 1.25rem;
  display: inline-grid;
  flex: none;
  place-items: center;
  box-sizing: border-box;
  width: var(--ut-icon-tile-size);
  height: var(--ut-icon-tile-size);
  border-radius: var(--ut-radius-card);
  background: var(--ut-icon-tile-surface);
  color: var(--ut-icon-tile-fg);
}

.ut-ui-icon-tile svg {
  display: block;
  width: var(--ut-icon-tile-glyph);
  height: var(--ut-icon-tile-glyph);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ut-ui-icon-tile[data-ut-size="sm"] {
  --ut-icon-tile-size: 1.75rem;
  --ut-icon-tile-glyph: 1rem;
  border-radius: var(--ut-radius-control);
}

.ut-ui-icon-tile[data-ut-size="lg"] {
  --ut-icon-tile-size: 3.5rem;
  --ut-icon-tile-glyph: 1.75rem;
}

.ut-ui-icon-tile[data-ut-tone="brand"] {
  --ut-icon-tile-fg: var(--ut-brand-strong);
  --ut-icon-tile-surface: var(--ut-brand-surface);
}

.ut-ui-icon-tile[data-ut-tone="info"] {
  --ut-icon-tile-fg: var(--ut-info);
  --ut-icon-tile-surface: var(--ut-info-surface);
}

.ut-ui-icon-tile[data-ut-tone="warm"] {
  --ut-icon-tile-fg: var(--ut-warning);
  --ut-icon-tile-surface: var(--ut-warning-surface);
}

.ut-ui-icon-tile[data-ut-tone="teal"] {
  --ut-icon-tile-fg: var(--ut-tone-teal);
  --ut-icon-tile-surface: var(--ut-tone-teal-surface);
}

.ut-ui-icon-tile[data-ut-tone="plum"] {
  --ut-icon-tile-fg: var(--ut-tone-plum);
  --ut-icon-tile-surface: var(--ut-tone-plum-surface);
}

.ut-ui-icon-tile[data-ut-tone="rose"] {
  --ut-icon-tile-fg: var(--ut-tone-rose);
  --ut-icon-tile-surface: var(--ut-tone-rose-surface);
}

[data-theme="dark"] .ut-ui .ut-ui-icon-tile {
  background: var(--ut-icon-tile-fg);
  color: var(--ut-icon-tile-surface);
}

@media (forced-colors: active) {
  .ut-ui-icon-tile {
    border: 1px solid CanvasText;
  }
}