/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/button.css
   Version: 0.1.3 · Build: 2026-09-21 · Benötigt: tokens.css, base.css

   0.1.3 — Die Haken --bh-btn-primary-bg und --bh-btn-primary-shadow sind
   wieder entfallen. Sie waren für eine Markenebene gebaut, die verworfen
   wurde (BACKLOG); übrig blieben zwei Regler, die niemand dreht.

   Der Befund dahinter bleibt aber gültig und steht jetzt in tokens.css:
   --bh-color-accent-strong war Fläche UND Schriftfarbe zugleich. Das ist
   mit --bh-color-accent-bright getrennt, nicht mit einem Haken.

   0.1.1 — .bh-btn--danger-ghost ist rahmenlos. Ein umrandeter roter Knopf
   liest sich als Hauptaktion, obwohl er eine Ausnahme ist.
   VENDORED — READ-ONLY.

   .bh-btn ist neutral. Die laute Variante heißt --primary, nicht umgekehrt.
   Abweichung vom Bestand, begründet in GUIDE.md §Button.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-2);

  min-height: var(--bh-control-height);
  padding: 0 var(--bh-control-padding-x);

  border: 1px solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg);
  background: var(--bh-surface-3);
  color: var(--bh-text-primary);

  font-family: inherit;
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  cursor: pointer;
  box-shadow: var(--bh-shadow-2);
  transition: background var(--bh-transition), border-color var(--bh-transition),
              color var(--bh-transition), box-shadow var(--bh-transition);
}

.bh-btn:hover  { border-color: var(--bh-border-strong); color: var(--bh-text-primary); }
.bh-btn:active { background: var(--bh-surface-1); }
.bh-btn:focus-visible { outline: var(--bh-focus-width) solid var(--bh-focus-color); outline-offset: var(--bh-focus-offset); }

.bh-btn:disabled,
.bh-btn[aria-disabled="true"],
.bh-btn.is-disabled {
  color: var(--bh-text-muted);
  background: var(--bh-surface-1);
  border-color: var(--bh-border-subtle);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.bh-btn > svg { width: var(--bh-icon-size); height: var(--bh-icon-size); flex: none; }

/* ── Primär — Indigo ─────────────────────────────────────────────────────── */
.bh-btn--primary {
  background: var(--bh-color-accent-strong);
  border-color: transparent;
  color: var(--bh-text-on-accent);
}
.bh-btn--primary:hover  { background: var(--bh-color-accent-hover); border-color: transparent; color: var(--bh-text-on-accent); }
.bh-btn--primary:active { background: var(--bh-color-accent-active); }
.bh-btn--primary:disabled,
.bh-btn--primary[aria-disabled="true"] { background: var(--bh-surface-1); color: var(--bh-text-muted); }

/* ── Solid — helle Fläche, aus dem FLX-Bestand erhalten ──────────────────── */
.bh-btn--solid {
  background: var(--bh-color-solid);
  border-color: transparent;
  color: var(--bh-text-on-solid);
}
.bh-btn--solid:hover  { background: var(--bh-color-solid-hover); border-color: transparent; color: var(--bh-text-on-solid); }
.bh-btn--solid:active { background: var(--bh-color-solid-active); }

/* ── Ghost — flächenlos, nur Rahmen ──────────────────────────────────────── */
.bh-btn--ghost {
  background: transparent;
  border-color: var(--bh-border-soft);
  box-shadow: none;
}
.bh-btn--ghost:hover  { background: var(--bh-color-accent-soft); border-color: var(--bh-color-accent); color: var(--bh-color-accent); }
.bh-btn--ghost:active { background: var(--bh-color-accent-overlay); }

/* ── Quiet — ohne Rahmen, für Werkzeugleisten ────────────────────────────── */
.bh-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--bh-text-tertiary);
  box-shadow: none;
}
.bh-btn--quiet:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); border-color: transparent; }
.bh-btn--quiet:active { background: var(--bh-surface-3); }

/* ── Destruktiv ──────────────────────────────────────────────────────────── */
.bh-btn--danger {
  background: var(--bh-color-danger);
  border-color: transparent;
  color: var(--bh-text-on-accent);
}
.bh-btn--danger:hover  { background: var(--bh-color-danger-hover); border-color: transparent; color: var(--bh-text-on-accent); }
.bh-btn--danger:focus-visible { outline-color: var(--bh-color-danger); }

/* Die Regelform für Löschen, Absagen und Sperren: Ghost mit danger-Text.
   Kein vollflächiger Farbblock — und KEIN Rahmen.

   Der Rahmen ist hier bis 2026-09-15 mitgelaufen und war falsch: zwei
   umrandete Knöpfe untereinander lesen sich als zwei gleichrangige
   Hauptaktionen, obwohl beide Ausnahmen sind. Ohne Rahmen ordnen sie sich
   unter, und die Farbe allein trägt die Warnung. Die Fläche kommt erst beim
   Zeigen. */
.bh-btn--danger-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--bh-color-danger);
  box-shadow: none;
}
.bh-btn--danger-ghost:hover  { background: var(--bh-color-danger-soft); border-color: transparent; color: var(--bh-color-danger); }
.bh-btn--danger-ghost:active { background: var(--bh-color-danger-soft); border-color: transparent; }
.bh-btn--danger-ghost:focus-visible { outline-color: var(--bh-color-danger); }

/* ── Discord — reserviert ────────────────────────────────────────────────── */
.bh-btn--discord {
  background: var(--bh-color-discord);
  border-color: transparent;
  color: var(--bh-text-on-discord);
  font-weight: var(--bh-weight-semibold);
}
.bh-btn--discord:hover  { background: var(--bh-color-discord-hover); border-color: transparent; color: var(--bh-text-on-discord); }
.bh-btn--discord:focus-visible { outline-color: var(--bh-color-discord); }

/* ── Formen ──────────────────────────────────────────────────────────────── */
.bh-btn--icon {
  width: var(--bh-control-height);
  min-width: var(--bh-control-height);
  padding: 0;
}
.bh-btn--block { display: flex; width: 100%; }

/* ── Buttongruppe ────────────────────────────────────────────────────────── */
.bh-btn-group { display: inline-flex; align-items: center; gap: var(--bh-space-2); }
.bh-btn-group--end { justify-content: flex-end; }

/* ── Touch ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .bh-btn { min-height: var(--bh-control-height-touch); }
  .bh-btn--icon { width: var(--bh-control-height-touch); min-width: var(--bh-control-height-touch); }
}