/* ============================================================
   buttons-v4.css — Zentrale Button-Definitionen (HR-App)
   ------------------------------------------------------------
   Kanonisches V4-Gold-Gradient für .btn-primary / .btn-gold.
   Ergänzt landing-v4.css für Marketing-Pages (gleicher Look).
   Wird auf App-Pages eingebunden, die bisher Inline-btn-CSS hatten.

   Tokens werden aus dem Page-Scope übernommen (`var(--gold)` etc.),
   mit V4-Fallback-Werten für Pages ohne eigene Tokens. Alle Fallbacks
   entsprechen der V4-Palette in CLAUDE.md (Gold, Coral, Amber, Teal,
   Ink, Border, Hover) — keine Tailwind-/Raw-Hex-Farben.
   ============================================================ */

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.btn-warning,
.btn-success,
.btn-gold,
.btn-coral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 180ms cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* ---------- Primary (V4 Gold-Gradient) ---------- */
.btn-primary,
.btn-gold {
  background: linear-gradient(135deg, var(--gold, #B8860B) 0%, var(--gold-hot, #D4A03E) 100%);
  color: #fff;
  border-color: var(--gold, #B8860B);
  box-shadow: 0 1px 4px rgba(184, 134, 11, 0.15);
}

.btn-primary:not(:disabled):hover,
.btn-gold:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.28);
  color: #fff;
}

.btn-primary:disabled,
.btn-gold:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-coral:disabled,
.btn-warning:disabled,
.btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---------- Secondary (Card-Background) ---------- */
.btn-secondary {
  background: var(--bg-card, #FFFFFF);
  color: var(--ink-2, #4A4643);
  border-color: var(--border, #E6E3DC);
}

.btn-secondary:not(:disabled):hover {
  background: var(--bg-hover, #FAFAF7);
  border-color: var(--border-hover, #D4D0C7);
  color: var(--ink, #1B1918);
}

/* ---------- Outline (transparenter Hintergrund) ---------- */
.btn-outline {
  background: transparent;
  color: var(--ink-2, #4A4643);
  border-color: var(--border-hover, #D4D0C7);
}

.btn-outline:not(:disabled):hover {
  border-color: var(--ink-3, #7A756F);
  color: var(--ink, #1B1918);
  background: var(--bg-hover, #FAFAF7);
}

/* ---------- Danger / Warning / Success ---------- */
.btn-danger,
.btn-coral {
  background: var(--coral, #DC4A3A);
  color: #fff;
  border-color: var(--coral, #DC4A3A);
}

.btn-danger:not(:disabled):hover,
.btn-coral:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 74, 58, 0.28);
}

.btn-warning {
  background: var(--amber, #D97706);
  color: #FFFFFF;
  border-color: var(--amber, #D97706);
}

.btn-warning:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.28);
}

.btn-success {
  background: var(--teal, #0D9488);
  color: #FFFFFF;
  border-color: var(--teal, #0D9488);
}

.btn-success:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.28);
}

/* ---------- Size-Modifier ---------- */
.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
}

/* ---------- Ghost / Link-Style ---------- */
.btn-ghost {
  background: transparent;
  color: var(--ink-3, #7A756F);
  border-color: transparent;
}

.btn-ghost:not(:disabled):hover {
  background: var(--bg-hover, #FAFAF7);
  color: var(--ink, #1B1918);
}

/* ---------- Loading-State (Spinner) ---------- */
.btn.is-loading,
.btn-primary.is-loading,
.btn-gold.is-loading,
.btn-secondary.is-loading,
.btn-danger.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after,
.btn-primary.is-loading::after,
.btn-gold.is-loading::after,
.btn-secondary.is-loading::after,
.btn-danger.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.btn-secondary.is-loading::after,
.btn-outline.is-loading::after {
  border: 2px solid rgba(74, 70, 67, 0.3);
  border-top-color: var(--ink-2, #4A4643);
}

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

/* ---------- Focus-State (Accessibility) ---------- */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-gold:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-success:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--gold, #B8860B);
  outline-offset: 2px;
}