/* ═══════════════════════════════════════════════
   BRAND BUTTONS — Teal-accent button system
   Variants: primary, outline, ghost, destructive
═══════════════════════════════════════════════ */

/* ─── Shared Base ─── */
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-destructive {
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  border-radius: 6px;
  height: 34px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

/* ─── Primary: Teal fill, white text ─── */
.btn-primary {
  background: #00C2B2;
  color: #ffffff;
  border-color: #00C2B2;
}
.btn-primary:hover {
  opacity: 0.85;
}

/* ─── Outline: Transparent bg, teal border, teal text ─── */
.btn-outline {
  background: transparent;
  color: #00C2B2;
  border-color: #00C2B2;
}
.btn-outline:hover {
  background: rgba(0, 194, 178, 0.1);
}

/* ─── Ghost: Transparent bg, no border, muted text ─── */
.btn-ghost {
  background: transparent;
  color: #7A9AB8;
  border-color: transparent;
}
.btn-ghost:hover {
  background: rgba(122, 154, 184, 0.1);
  color: #E8EEF5;
}

/* ─── Destructive: Transparent bg, red border, red text ─── */
.btn-destructive {
  background: transparent;
  color: #FF5F6D;
  border-color: #FF5F6D;
}
.btn-destructive:hover {
  background: rgba(255, 95, 109, 0.1);
}

/* ─── Focus Visible (all variants) ─── */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-destructive:focus-visible {
  outline: 2px solid #00C2B2;
  outline-offset: 2px;
}

/* ─── Disabled (all variants) ─── */
.btn-primary[disabled],
.btn-outline[disabled],
.btn-ghost[disabled],
.btn-destructive[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}