/* ============================================================
   JARVIS Button Components — Phase 4C
   Einheitliche Button-Varianten, Größen und Zustände.
   Alle Farben via Design-Tokens.
   ============================================================ */

/* ============================================================
   A. BTN BASIS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: 0 var(--space-4, 16px);
  height: var(--size-button-md, 40px);
  min-width: var(--size-touch-target, 44px);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  color: var(--color-action-primary-text, #ffffff);
  background: var(--color-action-primary, #6366f1);
  border: var(--border-width-thin, 1px) solid transparent;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background    var(--duration-fast, 100ms) var(--ease-out),
    color         var(--duration-fast, 100ms) var(--ease-out),
    border-color  var(--duration-fast, 100ms) var(--ease-out),
    box-shadow    var(--duration-fast, 100ms) var(--ease-out),
    opacity       var(--duration-fast, 100ms) var(--ease-out);
  -webkit-appearance: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring, #6366f1);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(1px);
}

/* Disabled — beide native und Klasse */
.btn:disabled,
.btn[disabled],
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading-Zustand */
.btn--loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.8;
}

.btn--loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}

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

/* ============================================================
   B. PRIMÄRER BUTTON (Standard)
   ============================================================ */
.btn-primary {
  background: var(--color-action-primary, #6366f1);
  color: var(--color-action-primary-text, #ffffff);
  border-color: var(--color-action-primary, #6366f1);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-action-primary-hover, #4f46e5);
  border-color: var(--color-action-primary-hover, #4f46e5);
}

.btn-primary:active:not(:disabled) {
  background: var(--color-action-primary-active, #4338ca);
  border-color: var(--color-action-primary-active, #4338ca);
}

/* ============================================================
   C. SEKUNDÄRER BUTTON (Ghost mit Rahmen)
   ============================================================ */
.btn-secondary {
  background: var(--color-action-secondary, #f1f3f5);
  color: var(--color-action-secondary-text, #1a1d21);
  border-color: var(--color-action-secondary-border, #dee2e6);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-action-secondary-hover, #e9ecef);
}

.btn-secondary:active:not(:disabled) {
  background: var(--color-bg-sunken, #e9ecef);
}

/* ============================================================
   D. GHOST BUTTON (kein Hintergrund)
   ============================================================ */
.btn-ghost {
  background: transparent;
  color: var(--color-text-primary, #1a1d21);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-action-ghost-hover, #f1f3f5);
}

/* ============================================================
   E. DANGER BUTTON (Lösch- und Gefahr-Aktionen)
   ============================================================ */
.btn-danger {
  background: var(--color-action-danger, #dc2626);
  color: var(--color-action-danger-text, #ffffff);
  border-color: var(--color-action-danger, #dc2626);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-action-danger-hover, #b91c1c);
  border-color: var(--color-action-danger-hover, #b91c1c);
}

.btn-danger:focus-visible {
  outline-color: var(--color-action-danger, #dc2626);
}

/* ============================================================
   F. SUCCESS BUTTON
   ============================================================ */
.btn-success {
  background: var(--color-status-success, #16a34a);
  color: #ffffff;
  border-color: var(--color-status-success, #16a34a);
}

.btn-success:hover:not(:disabled) {
  background: var(--color-status-success, #15803d);
}

/* ============================================================
   G. KI-AKTION BUTTON (Violet)
   ============================================================ */
.btn-ai {
  background: var(--color-ai-accent, #7c3aed);
  color: #ffffff;
  border-color: var(--color-ai-accent, #7c3aed);
}

.btn-ai:hover:not(:disabled) {
  background: var(--color-ai-border, #6d28d9);
  border-color: var(--color-ai-border, #6d28d9);
}

/* ============================================================
   H. ICON BUTTON (quadratisch, nur Icon)
   ============================================================ */
.btn-icon {
  width: var(--size-button-md, 40px);
  height: var(--size-button-md, 40px);
  padding: 0;
  min-width: var(--size-button-md, 40px);
}

/* ============================================================
   I. GRÖßEN
   ============================================================ */
.btn-sm {
  height: var(--size-button-sm, 32px);
  padding: 0 var(--space-3, 12px);
  font-size: var(--font-size-xs, 0.75rem);
  border-radius: var(--radius-sm, 4px);
}

.btn-lg {
  height: var(--size-button-lg, 48px);
  padding: 0 var(--space-6, 24px);
  font-size: var(--font-size-md, 1rem);
}

/* ============================================================
   J. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 0.01ms !important;
  }

  .btn--loading::before {
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   K. DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .btn-secondary {
    background: var(--color-bg-sunken, #2b3035);
    color: var(--color-text-primary, #f1f3f5);
    border-color: var(--color-border-default, #343a40);
  }

  .btn-secondary:hover:not(:disabled) {
    background: var(--color-bg-elevated, #343a40);
  }

  .btn-ghost {
    color: var(--color-text-primary, #f1f3f5);
  }

  .btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
  }
}

[data-theme="dark"] .btn-secondary {
  background: var(--color-bg-sunken, #2b3035);
  color: var(--color-text-primary, #f1f3f5);
  border-color: var(--color-border-default, #343a40);
}

[data-theme="dark"] .btn-ghost {
  color: var(--color-text-primary, #f1f3f5);
}