/* Shared button primitives — GitHub issue #77. Classes only (no ERB partial).
 * Loaded after application.css so design tokens (--color-*, --space-*, --radius, etc.) resolve.
 *
 * Compose `.btn` with one variant (and optional size / layout):
 * - .btn--primary — main action (form submit, primary CTA)
 * - .btn--secondary — alternate, cancel, low-emphasis actions
 * - .btn--danger — destructive actions
 * - .btn--ghost — transparent surface; nav uses .app-nav .btn--ghost for dark-bar contrast
 * - .btn--small, .btn--sm — compact padding (same intent; .btn--sm used in tight UI e.g. recordings)
 * - .btn--block — full width; .card--auth .btn--block adds spacing between stacked auth submits
 *
 * Use these instead of new *-btn blocks in area files when the standard look fits. Keep separate
 * styling for OAuth brand buttons, marketing hero CTAs, locale selector pills, and bespoke flows
 * (e.g. host-guide-interview) where tokens differ intentionally.
 */
@layer components {

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
}

.btn--danger {
  background: var(--color-error);
  color: #fff;
}

.btn--danger:hover {
  background: #b91c1c;
}

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

.btn--ghost:hover {
  background: var(--color-slate-06);
  color: var(--color-text);
}

.btn--ghost:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Dark nav bar: override base ghost for contrast + Outfit label styling */
.app-nav .btn--ghost {
  border: none;
  color: var(--color-nav-text);
  font-family: "Outfit", var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: var(--space-1) var(--space-2);
}

.app-nav .btn--ghost:hover {
  background: color-mix(in srgb, var(--color-nav-text) 10%, transparent);
  color: var(--color-nav-text-hover);
}

.btn--small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: 0.8125rem;
}

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

.card--auth .btn--block {
  margin-top: var(--space-2);
}

}