/**
 * button.css — Schaltflächen und schaltflächenartige Links (T-06).
 *
 * Farben ausschliesslich über Token. Das Marken-Orange erscheint hier
 * bewusst nicht: auf hellem Grund erreicht es 2,44:1 und verfehlt damit
 * sowohl die Text- als auch die UI-Schwelle. Aktionen nutzen
 * --ec-color-primary (5,22:1). Siehe docs/ASSET-SWAP.md.
 */

.ec-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ec-space-2xl);
  padding: var(--ec-space-2xs) var(--ec-space-md);
  border: var(--ec-border-width-thick) solid transparent;
  border-radius: var(--ec-radius-md);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  font-weight: var(--ec-fw-medium);
  line-height: var(--ec-lh-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ec-duration-fast) var(--ec-ease),
    border-color var(--ec-duration-fast) var(--ec-ease),
    color var(--ec-duration-fast) var(--ec-ease);
}

/* Touch-Ziel mindestens 44 x 44 px (T-14). */
.ec-button--primary {
  border-color: var(--ec-color-primary);
  background-color: var(--ec-color-primary);
  color: var(--ec-color-surface);
}

.ec-button--primary:hover,
.ec-button--primary:focus-visible {
  border-color: var(--ec-color-primary-hover);
  background-color: var(--ec-color-primary-hover);
  color: var(--ec-color-surface);
}

.ec-button--ghost {
  border-color: var(--ec-color-border-strong);
  background-color: transparent;
  color: var(--ec-color-ink);
}

.ec-button--ghost:hover,
.ec-button--ghost:focus-visible {
  border-color: var(--ec-color-primary);
  color: var(--ec-color-primary);
}