/* ==========================================================================
   Buttons — .btn with variants, sizes and icon support.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

/* ---- Variants ----------------------------------------------------------- */

.btn--primary {
  background: var(--gradient-brand);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn--primary:hover {
  box-shadow: var(--shadow-2), var(--shadow-glow);
  filter: brightness(1.06);
}

.btn--secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn--secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-accent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.btn--text {
  padding-inline: 0.4rem;
  background: transparent;
  color: var(--accent-strong);
}

.btn--text:hover { color: var(--accent); }

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

.btn--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--text-base); border-radius: var(--radius-md); }

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

/* ---- With trailing arrow -------------------------------------------------- */

.btn .btn__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---- Icon-only ------------------------------------------------------------ */

.btn--icon {
  padding: 0.6rem;
  border-radius: var(--radius-md);
}