/* ============================================================================
 *  chx-btn · unified shared button component
 *  --------------------------------------------------------------------------
 *  Ersetzt die drei alten Site-Klassen:
 *    .cx-btn      (codex)          → .chx-btn
 *    .btn-ember   (hauptseite)     → .chx-btn.chx-btn--primary (mit ember-tint)
 *    .btn-gold    (hauptseite)     → .chx-btn.chx-btn--primary
 *    .btn-cmdk    (energies)       → .chx-btn (default ghost-look)
 *
 *  Token-Disziplin: alle Werte aus chazon-shared.css (v1.50 Foundation).
 *  Context-aware via [data-context] (cascade) — sieht in elements obsidian-kühl,
 *  in energies rosegold-warm, in codex gold-leaf, in hauptseite goldene Mitte.
 *
 *  Varianten:    .chx-btn--primary | --ghost | --sigil | --danger | --link
 *  Sizes:        .chx-btn--sm | --md (default) | --lg
 *  States:       hover · active · focus-visible · disabled · loading
 *  Accessibility: 44×44 Touch-Target, focus-ring via --chx-focus-ring
 *
 *  Version: 1.0 · created 2026-05-21
 * ============================================================================ */

.chx-btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chx-space-2);
  padding: var(--chx-space-3) var(--chx-space-5);
  min-height: 44px;            /* a11y touch-target */
  position: relative;
  isolation: isolate;

  /* type */
  font-family: "Cormorant Garamond", "Frank Ruhl Libre", Georgia, serif;
  font-size: var(--chx-font-meta);
  font-weight: 500;
  line-height: var(--chx-leading-tight);
  letter-spacing: var(--chx-tracking-wide);
  text-decoration: none;
  white-space: nowrap;

  /* surface */
  color: var(--chx-finale-accent-light, #f5deb3);
  background: var(--chx-glass-tint);
  border: 1px solid var(--chx-glass-edge);
  border-radius: var(--chx-radius-md);
  backdrop-filter: blur(var(--chx-glass-blur-tight)) saturate(var(--chx-glass-saturate, 140%));
  -webkit-backdrop-filter: blur(var(--chx-glass-blur-tight)) saturate(var(--chx-glass-saturate, 140%));
  box-shadow: var(--chx-elev-1);

  /* motion */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--chx-dur-fast) var(--chx-ease-out-quint),
    box-shadow var(--chx-dur-base) var(--chx-ease-out-quint),
    border-color var(--chx-dur-base) var(--chx-ease-organic),
    background-color var(--chx-dur-base) var(--chx-ease-organic),
    color var(--chx-dur-base) var(--chx-ease-organic);
}

/* ---------- States ---------- */

.chx-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--chx-elev-2), var(--chx-elev-glow);
  border-color: var(--chx-finale-accent-soft, rgba(201, 164, 74, 0.42));
  color: var(--chx-finale-accent, #c9a44a);
}

.chx-btn:active {
  transform: translateY(0);
  box-shadow: var(--chx-elev-1);
  transition-duration: var(--chx-dur-instant);
}

.chx-btn:focus-visible {
  outline: none;
  box-shadow: var(--chx-focus-ring), var(--chx-elev-2);
}

.chx-btn:disabled,
.chx-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--chx-elev-1);
  filter: saturate(0.5);
  pointer-events: none;
}

/* ---------- Loading-State (set via aria-busy="true") ---------- */

.chx-btn[aria-busy="true"] {
  cursor: progress;
  color: transparent;
}

.chx-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em 0 0 -0.5em;
  border: 1.5px solid currentColor;
  border-color: var(--chx-finale-accent-light) transparent var(--chx-finale-accent-light) transparent;
  border-radius: 50%;
  color: var(--chx-finale-accent-light);
  animation: chx-btn-spin 0.9s linear infinite;
}

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

/* ---------- Varianten ---------- */

/* Primary · gefüllt, gradient-akzent, hochste Hierarchy */
.chx-btn--primary {
  background:
    linear-gradient(135deg,
      var(--chx-finale-accent, #c9a44a) 0%,
      var(--chx-finale-accent-light, #f5deb3) 100%);
  color: #1a0a1f;
  border-color: transparent;
  box-shadow: var(--chx-elev-2), var(--chx-elev-glow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.chx-btn--primary:hover {
  color: #0e0518;
  filter: brightness(1.08);
  box-shadow: var(--chx-elev-3), var(--chx-elev-glow);
}
.chx-btn--primary:focus-visible {
  box-shadow: var(--chx-focus-ring), var(--chx-elev-3);
}

/* Ghost · transparent, nur Border, für Sekundär-Actions */
.chx-btn--ghost {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.chx-btn--ghost:hover {
  background: var(--chx-glass-tint);
  box-shadow: var(--chx-elev-1);
}

/* Sigil · runde Icon-Buttons (z.B. Avatar-Trigger, Close-Buttons) */
.chx-btn--sigil {
  padding: var(--chx-space-2);
  border-radius: var(--chx-radius-pill);
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
}

/* Danger · für destruktive Actions (Leave Call, Delete Memory) */
.chx-btn--danger {
  color: #f5a8a8;
  border-color: rgba(245, 168, 168, 0.32);
}
.chx-btn--danger:hover {
  color: #ffc7c7;
  border-color: rgba(245, 168, 168, 0.6);
  box-shadow: var(--chx-elev-2), 0 0 18px rgba(245, 168, 168, 0.25);
}

/* Link · keine Surface, nur unterstrichene Type · für Inline-CTAs */
.chx-btn--link {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: var(--chx-space-1) var(--chx-space-2);
  min-height: auto;
  text-decoration: underline;
  text-decoration-color: var(--chx-finale-accent-soft);
  text-underline-offset: 0.2em;
  color: var(--chx-finale-accent-light);
}
.chx-btn--link:hover {
  transform: none;
  text-decoration-color: var(--chx-finale-accent);
  color: var(--chx-finale-accent);
  box-shadow: none;
}

/* ---------- Sizes ---------- */

.chx-btn--sm {
  padding: var(--chx-space-2) var(--chx-space-3);
  min-height: 36px;
  font-size: var(--chx-font-caption);
  border-radius: var(--chx-radius-sm);
}
.chx-btn--sm.chx-btn--sigil { min-width: 36px; padding: var(--chx-space-1); }

.chx-btn--lg {
  padding: var(--chx-space-4) var(--chx-space-6);
  min-height: 52px;
  font-size: var(--chx-font-body);
  border-radius: var(--chx-radius-lg);
}
.chx-btn--lg.chx-btn--sigil { min-width: 52px; padding: var(--chx-space-3); }

/* ---------- Group · für Side-by-side Button-Gruppen ---------- */

.chx-btn-group {
  display: inline-flex;
  gap: var(--chx-space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Reduced-Motion Respekt ---------- */

@media (prefers-reduced-motion: reduce) {
  .chx-btn,
  .chx-btn:hover,
  .chx-btn:active {
    transition-duration: 0ms;
    transform: none;
  }
  .chx-btn[aria-busy="true"]::after {
    animation: none;
    /* statisches Sanduhr-Icon ist hier inaktiv — verlass dich auf aria-busy für Screen-Reader */
    opacity: 0.6;
  }
}

/* ---------- Hauptseite Ember-Tint (Marketing-Identität bleibt erhalten) ---------- */
[data-context="hauptseite"] .chx-btn--primary {
  background: linear-gradient(135deg, #d4652a 0%, var(--chx-elem-gold, #c9a44a) 60%, var(--chx-elem-gold-light, #f5deb3) 100%);
}

/* ---------- Codex · Manuskript-Marginalia · JetBrains-Mono Caps ---------- */
[data-context="codex"] .chx-btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--chx-radius-pill);
  border-width: 0.5px;
}
[data-context="codex"] .chx-btn--sm { font-size: 0.62rem; }
[data-context="codex"] .chx-btn--lg { font-size: 0.78rem; }