/* CoCreate · button component.
   Primary = gradient (logo gradient), Ghost = outlined.
   Sizes: --sm, default (md), --lg. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.35rem;
  border-radius: var(--r-md);
  font-family: var(--ff-display);
  font-size: var(--fs-body-m);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--secondary), var(--primary));
  box-shadow: var(--sh-sm);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--sh-glow); }
.btn--ghost {
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-color);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--fs-body-s); border-radius: var(--r-sm); }
.btn--lg { padding: 0.9rem 1.7rem; font-size: var(--fs-body-l); border-radius: var(--r-lg); }