/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/icon-box.css
   Version: 0.1.1 · Build: 2026-09-20 · Benötigt: tokens.css
   VENDORED — READ-ONLY.

   0.1.1 — Die Fläche war steuerbar, das Symbol darin nicht. Ein <i> aus
   einer Icon-Schrift erbt die Fließtextgröße, also blieb es stehen, wenn
   --bh-icon-box-size sich änderte: beim Umbau der Kennzahl-Kacheln im
   Ticketsystem schrumpfte die Fläche von 56 auf 36px (−36%), das Symbol
   darin aber von 28 auf 13px (−54%). Zwei Kanäle für eine Größe
   (DESIGN.md §0b). Jetzt trägt die Fläche beide.

   Ein Symbol auf getönter Fläche. Trägt die Marke einer Entitätszeile, das
   Symbol einer Kennzahl-Kachel und den Kopf eines Protokolleintrags.

   ZWEITER BEDARF BELEGT: Team Hub (.icon-box, Marke jeder Entitätszeile),
   Ticketsystem (.stat-icon-box in fünf Kacheln, .activity-icon im
   Protokoll). Das Token --bh-color-accent-overlay trug seit 0.1.0 den
   Vermerk „Icon-Box, aktiver Nav-Punkt" — die Komponente war im
   Tokensatz vorweggenommen, nur nie gebaut.

   GRÖSSE: Die beiden Projekte trugen vier verschiedene (34, 36, 40, 44px),
   keine davon auf einer Skala. Die Vorgabe ist deshalb --bh-control-height:
   Eine Symbolfläche steht fast immer neben einem Knopf oder einem Feld, und
   gleiche Höhe ist der einzige Wert, der dort etwas bedeutet. Wer eine
   andere braucht, setzt --bh-icon-box-size von außen — wie bei
   --bh-detail-aside-w und --bh-field-label-w.

   KEIN --info: Im Designsystem IST der Akzent die informative Farbe. Eine
   eigene Info-Variante daneben wäre ein zweiter Kanal für dieselbe
   Bedeutung (DESIGN.md §0b). Das Ticketsystem trug beides; is-info bildet
   auf die Vorgabe ab.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-icon-box {
  --bh-icon-box-size: var(--bh-control-height);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  width:  var(--bh-icon-box-size);
  height: var(--bh-icon-box-size);

  border-radius: var(--bh-radius-lg);
  background: var(--bh-color-accent-overlay);
  color: var(--bh-color-accent);

  /* Das Symbol folgt der Fläche, nicht der Schrift der Umgebung.
     Der Faktor ist nicht gegriffen, sondern rückgerechnet: bei der
     Vorgabe --bh-control-height (36px) ergibt 0.45 genau 16.2px, also
     --bh-icon-size — den Wert, der hier vorher stand. Die Vorgabe ändert
     sich dadurch für niemanden; die Ableitung verallgemeinert nur, was
     schon galt. Wer den Faktor anfasst, verschiebt jede Icon-Box im
     Bestand — das ist der Preis dafür, dass es nur einen Regler gibt.
     Keine Kollision mit der Schriftskala aus §4: Icon-Maße haben im DS
     eine eigene (--bh-icon-size, --bh-icon-size-nav), weil ein Symbol
     kein Text ist. */
  font-size: calc(var(--bh-icon-box-size) * 0.45);
}

/* 1em statt --bh-icon-size: dieselbe Ableitung für gezeichnete Symbole.
   Bei der Vorgabe steht hier weiterhin 16.2px. */
.bh-icon-box > svg { width: 1em; height: 1em; }

/* Zustandstönungen. Alle vier Flächen gibt es als Token — hier entsteht
   keine neue Farbe (DESIGN.md §5). */
.bh-icon-box--success { background: var(--bh-color-success-soft); color: var(--bh-color-success); }
.bh-icon-box--warning { background: var(--bh-color-warning-soft); color: var(--bh-color-warning); }
.bh-icon-box--danger  { background: var(--bh-color-danger-soft);  color: var(--bh-color-danger);  }

/* Ohne Aussage: für Listen, in denen jede Zeile eine Marke trägt und die
   Farbe sonst mit der Länge der Liste mitwüchse (DESIGN.md §0d). */
.bh-icon-box--neutral { background: var(--bh-surface-3); color: var(--bh-text-tertiary); }