.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn--primary  { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-accent); }

.btn--gradient { background: var(--gradient-brand); color: #fff; }
.btn--gradient:hover { filter: brightness(1.08); box-shadow: var(--shadow-accent); }

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

.btn--white { background: #fff; color: var(--color-accent); }
.btn--white:hover { background: var(--color-accent-subtle); }

.btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
}

.btn--lg    { font-size: var(--text-md); padding: 12px 24px; }
.btn--full  { width: 100%; justify-content: center; }