/* Buttons: one primary accent action with a hard offset shadow, one ghost variant. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.9em 1.6em;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

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

.btn-primary {
  background: var(--accent);
  color: var(--paper-card);
  box-shadow: 4px 4px 0 rgba(16, 16, 16, 0.9);
}

.btn-primary:hover {
  background: var(--accent-deep);
  color: var(--paper-card);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(16, 16, 16, 0.9);
}

.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(16, 16, 16, 0.9);
}

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

.btn-ghost:hover {
  color: var(--ink);
  background: var(--paper-card);
  box-shadow: var(--shadow-soft);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 0.65em 1.2em;
}

.btn-lg {
  font-size: var(--text-lg);
  padding: 0.95em 1.9em;
}

/* Disabled buttons must look disabled (owner bug report 2026-07-18: the
   inert "Pick a style" submit looked clickable). */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* [hidden] must beat the display rule above (same lesson as the style
   modal's filtered cards). */
.btn[hidden] {
  display: none;
}