/*
 * Button components
 * Eko DDD - Primary, secondary, and utility buttons
 */

.btn {
  --bg: var(--brand-purple);
  --fg: #fff;
  background: var(--bg);
  color: var(--fg);
  border: none;
  padding: 0.9rem 1.25rem;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  --bg: transparent;
  --fg: var(--brand-purple);
  background: transparent;
  color: var(--brand-purple);
  border: 2px solid color-mix(in oklab, var(--brand-purple) 20%, white);
  box-shadow: none;
}

.btn--green {
  --bg: var(--brand-green);
}

.badge {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-green) 6%, white);
  color: color-mix(in oklab, var(--brand-green) 70%, black);
  border: 1px solid color-mix(in oklab, var(--brand-green) 20%, white);
}