/* ============================================================================
 * COMPONENT · tc-button
 * ----------------------------------------------------------------------------
 * 7 Variants, 3 Groessen, mehrere States.
 * Loest die historischen .btn / .gm-btn / .pf-tool-btn + Inline-Button-Styles ab.
 *
 * Token-Abhaengigkeiten:
 *   --tc-accent, --tc-accent-light, --tc-accent-glow
 *   --tc-bg-surface-1, --tc-bg-surface-2
 *   --tc-text-strong, --tc-text-default, --tc-text-muted, --tc-text-on-accent
 *   --tc-deco-warm-bg, --tc-deco-warm-border, --tc-deco-ornament-*
 *   --tc-success/--tc-danger + -bg/-border
 *   --tc-space-*, --tc-radius-*, --tc-motion-*, --tc-touch-*
 *
 * Joy-of-Use-Patterns:
 *   - Hover-Glow auf primary + emphatic + tool
 *   - Bounce-Lift auf emphatic (translateY)
 *   - Spinner-Animation im .is-loading-State
 *   - Touch-Optimierung (auto-upgrade auf 44px Min-Height)
 *
 * Version: 1.0 (29. Mai 2026, Phase 2)
 * ============================================================================ */


/* ============================================================================
 * BASE — alle Buttons erben das hier
 * ============================================================================ */
.tc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-touch-min);
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 1px solid transparent;
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background var(--tc-motion-fast),
              border-color var(--tc-motion-fast),
              color var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast),
              transform var(--tc-motion-fast);
}

.tc-button:hover {
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
}

.tc-button:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

.tc-button[disabled],
.tc-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ============================================================================
 * SIZES — sm, md (default), lg
 * ============================================================================ */
.tc-button--sm {
  min-height: 28px;
  padding: var(--tc-space-1) var(--tc-space-3);
  font-size: var(--tc-text-xs);
}

.tc-button--lg {
  min-height: var(--tc-touch-rec);
  padding: var(--tc-space-3) var(--tc-space-5);
  font-size: var(--tc-text-base);
}


/* ============================================================================
 * VARIANTS — Tonalitaets-Spektrum von dezent bis CTA-Knall
 * ============================================================================ */

/* --- Ghost: kein Background, nur Text-Hover --- */
.tc-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tc-text-default);
}
.tc-button--ghost:hover {
  background: var(--tc-bg-surface-1);
  color: var(--tc-text-strong);
}

/* --- Link: sieht aus wie Hyperlink (Auszeichnungs-Gold fuer Kontrast) --- */
.tc-button--link {
  background: transparent;
  border-color: transparent;
  color: var(--tc-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: auto;
}
.tc-button--link:hover {
  background: transparent;
  color: var(--tc-highlight);
  filter: brightness(1.15);
}

/* --- Secondary: Standard mit Alpha-BG. Text = Auszeichnungs-Gold
       (--tc-highlight) fuer durchgehend guten Kontrast auf dunklem Grund,
       auch wenn der Primaer-Akzent dunkel ist (z.B. AoS-Rot). --- */
.tc-button--secondary {
  background: var(--tc-deco-warm-bg);
  border-color: var(--tc-deco-warm-border);
  color: var(--tc-highlight);
}
.tc-button--secondary:hover {
  background: rgba(var(--tc-highlight-rgb), 0.12);
  border-color: var(--tc-highlight);
  color: var(--tc-highlight);
}

/* --- Primary: deutliche CTA mit vollem Akzent --- */
.tc-button--primary {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-text-on-accent);
  font-weight: var(--tc-weight-bold);
}
.tc-button--primary:hover {
  background: var(--tc-accent-light);
  border-color: var(--tc-accent-light);
  color: var(--tc-text-on-accent);
  box-shadow: 0 0 12px var(--tc-accent-glow);
}

/* --- Success: positive Confirmation --- */
.tc-button--success {
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
  color: var(--tc-success);
}
.tc-button--success:hover {
  background: rgba(74, 222, 128, 0.18);
  border-color: var(--tc-success);
  color: var(--tc-success);
}

/* --- Danger: destruktive Aktion --- */
.tc-button--danger {
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
  color: var(--tc-danger);
}
.tc-button--danger:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: var(--tc-danger);
  color: var(--tc-danger);
}

/* --- Emphatic: Top-CTA mit Cinzel + Gradient + Glow + Bounce-Lift --- */
.tc-button--emphatic {
  background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-dark));
  border-color: var(--tc-accent);
  color: var(--tc-text-on-accent);
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-bold);
  letter-spacing: var(--tc-tracking-wide);
  box-shadow: 0 0 16px var(--tc-accent-glow);
  transition: all var(--tc-motion-bounce);
}
.tc-button--emphatic:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--tc-accent-glow);
}
.tc-button--emphatic:active {
  transform: translateY(0);
}


/* ============================================================================
 * tc-button--tool — eigene Tool-Button-Komponente
 * Icon links, Label + Sub-Label rechts. Variant C aus dem Audit
 * (.pf-tool-btn) wird zur ersten Klasse.
 * ============================================================================ */
.tc-button--tool {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-height: 56px;
  padding: var(--tc-space-3) var(--tc-space-4);
  text-align: left;
  background: var(--tc-bg-surface-1);
  border-color: var(--tc-deco-ornament-border);
  white-space: normal;
}
.tc-button--tool:hover {
  background: var(--tc-bg-surface-2);
  border-color: var(--tc-accent);
  box-shadow: 0 0 12px var(--tc-deco-ornament-glow);
}

.tc-button__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-button__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tc-button__label {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  color: var(--tc-accent);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
}

.tc-button__sub {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}


/* ============================================================================
 * STATES — is-loading, is-active
 * ============================================================================ */
.tc-button.is-loading {
  cursor: wait;
  pointer-events: none;
}

.tc-button.is-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--tc-space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tc-button-spin 0.8s linear infinite;
}

@keyframes tc-button-spin {
  to { transform: rotate(360deg); }
}

.tc-button.is-active {
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
  border-color: var(--tc-deco-ornament-border);
}


/* ============================================================================
 * TOUCH-OPTIMIERUNG
 * Auf Touch-Geraeten alle Buttons auf 44px Mindesthoehe ziehen.
 * ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .tc-button { min-height: var(--tc-touch-rec); }
  .tc-button--sm { min-height: 32px; }
  .tc-button--lg { min-height: 52px; }
  .tc-button--tool { min-height: 64px; }

  /* Hover-Effekte auf Touch deaktivieren (sonst stuck-hover) */
  .tc-button--emphatic:hover { transform: none; }
}