/* ============================================================
   OmniResume — Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.125rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg,
.btn img {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
}

/* ========== VARIANTS ========== */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
}
.btn--primary:active {
  background: var(--color-primary-active);
  transform: translateY(1px);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover {
  background: var(--color-bg-muted);
  color: var(--color-text);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-brand-50);
  color: var(--color-primary-hover);
}
[data-theme="dark"] .btn--outline:hover {
  background: rgba(59, 130, 246, 0.12);
}

.btn--danger {
  background: var(--color-danger-500);
  color: #fff;
}
.btn--danger:hover {
  background: var(--color-danger-700);
  color: #fff;
}

/* ========== SIZES ========== */
.btn--sm { padding: 0.4rem 0.75rem; font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn--lg { padding: 0.875rem 1.5rem; font-size: var(--text-base); border-radius: var(--radius-xl); }
.btn--xl { padding: 1rem 1.75rem; font-size: var(--text-lg); border-radius: var(--radius-xl); }

.btn--icon {
  padding: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
}
.btn--icon.btn--sm { width: 1.875rem; height: 1.875rem; }
.btn--icon.btn--lg { width: 2.75rem; height: 2.75rem; }

.btn--block { width: 100%; }