/* Buttons — .btn + variants. All values come from colors_and_type.css.
   Hover rules sit in @media (hover: hover) so a tap never leaves a sticky
   hover look on touch screens. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--fg-strong);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .btn:hover { background: var(--parchment-50); box-shadow: var(--shadow-2); } }
.btn:active, .btn.is-active { background: var(--parchment-200); box-shadow: none; transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Primary — carved walnut */
.btn--primary {
  background: var(--surface-wood);
  background-color: var(--accent);
  color: var(--fg-on-accent);
  border-color: var(--wood-900);
  box-shadow: var(--bevel-wood), var(--shadow-2);
  text-shadow: 0 1px 0 var(--shade-strong);
}
@media (hover: hover) { .btn--primary:hover { background: var(--surface-wood); background-color: var(--accent-hover); filter: brightness(1.08); box-shadow: var(--bevel-wood), var(--shadow-3); } }
.btn--primary:active, .btn--primary.is-active { background: var(--surface-wood-dark); background-color: var(--accent-active); filter: none; box-shadow: var(--bevel-inlay); transform: translateY(1px); }
.btn--primary:focus-visible { box-shadow: var(--bevel-wood), var(--focus-ring); }

/* Gold — reward / confirm the big moment (use once per screen) */
.btn--gold {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--ink-900);
  border-color: var(--gold-700);
  box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-2);
}
@media (hover: hover) { .btn--gold:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-3); } }
.btn--gold:active { background: var(--gold-500); filter: none; box-shadow: var(--bevel-inlay); }

/* Ghost — text on parchment, no card */
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--fg); }
@media (hover: hover) { .btn--ghost:hover { background: var(--tint); box-shadow: none; } }
.btn--ghost:active { background: var(--tint-strong); }

/* Danger */
.btn--danger { color: var(--danger-700); border-color: var(--danger-500); }
@media (hover: hover) { .btn--danger:hover { background: var(--danger-100); } }

/* On a dark (wood) surface */
.on-dark .btn { background: var(--tint-on-dark); border-color: var(--border-on-dark); color: var(--fg-on-dark); box-shadow: none; }
@media (hover: hover) { .on-dark .btn:hover { background: var(--tint-on-dark-strong); } }
.on-dark .btn:focus-visible { box-shadow: var(--focus-ring-dark); }
.on-dark .btn--primary { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--ink-900); border-color: var(--gold-700); text-shadow: none; box-shadow: inset 0 1px 0 var(--gloss), var(--shadow-2); }
@media (hover: hover) { .on-dark .btn--primary:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); filter: brightness(1.05); } }  /* keep the gold under .on-dark .btn:hover */
.on-dark .btn--ghost { background: transparent; border-color: transparent; }

/* Sizes */
.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-7); font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.btn--block { width: 100%; }

/* Icon-only — square touch target */
.btn--icon { width: var(--control-h); min-width: var(--control-h); padding: 0; border-radius: var(--radius-md); }
.btn--icon.btn--sm { width: var(--control-h-sm); min-width: var(--control-h-sm); }
.btn--round { border-radius: var(--radius-round); }
.btn svg { width: var(--icon-size); height: var(--icon-size); flex: none; fill: currentColor; }
.btn--sm svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* Button row */
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.btn-row > .btn--grow { flex: 1 1 auto; }

/* Nudge — shake on an illegal action */
.btn.is-shaking { animation: btn-shake 0.4s var(--ease-out); }
@keyframes btn-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}