/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1rem 2rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  transition: var(--transition-smooth);
}

.btn--primary {
  background: var(--color-dusty-rose);
  color: var(--color-charcoal);
}

.btn--primary:hover {
  background: var(--color-dusty-rose-light);
  transform: translateY(-2px);
}

.btn--secondary {
  background: transparent;
  color: var(--color-cream);
  border: var(--border-width) solid rgba(245, 240, 232, 0.3);
}

/* The variant above is a light mark for dark surfaces — the hero, the footer.
   Set on cream or white it fades to an empty rectangle, which is where the
   filter and price controls live. This is the same gesture for the light half
   of the shop. */
.btn--quiet {
  background: var(--color-white);
  color: var(--color-charcoal);
  border: var(--border-width) solid var(--color-gray-200);
}

.btn--quiet:hover {
  background: var(--color-cream);
  border-color: var(--color-dusty-rose);
  color: var(--color-charcoal);
}

.btn--quiet:focus-visible {
  outline: none;
  border-color: var(--color-dusty-rose);
  box-shadow: var(--focus-ring);
}

/* Compact size: several pages already asked for it by name, and naming it is
   what stops them inheriting the two-rem padding a hero button needs. */
.btn--small {
  padding: 0.6rem 1.15rem;
  font-size: 0.85rem;
  border-radius: var(--radius-md);
}

.btn--secondary:hover {
  border-color: var(--color-cream);
  background: rgba(245, 240, 232, var(--opacity-bg-subtle));
}

.btn--accent {
  background: var(--color-terracotta-strong);
  color: var(--color-white);
}

.btn--accent:hover {
  background: var(--color-terracotta-dark);
  transform: translateY(-2px);
}