/* ---------- Shared button system ----------

   Single home for House's text-label buttons. Three variants — primary,
   secondary, danger — share one pill-shaped, borderless shape; only the
   fill + text color change. Use these classes everywhere a button
   carries a text label (Save, Confirm, Begin, Delete, Log out, etc.).

   Card-choice buttons inside a card use .button-primary too, stretched
   to full width inside .card-choices via a width override in styles.css.

   NOT covered here — and intentionally kept as their own visual
   vocabulary — are the emoji-as-affordance buttons: .help-trigger,
   .ftree-trigger, .dice-trigger, .modal-close, .icon-option. Those
   sit in styles.css / modals.css with their own borderless-emoji rules. */

/* Base — everything text-label buttons share. The variant classes
   below only override background and color. */
.button-primary,
.button-secondary,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  /* Smooth color transition on hover so the variant-specific darkening
     reads as a deliberate response, not a flicker. Transform is here
     too so the mouse-down shrink (see :active below) eases in/out
     rather than snapping. */
  transition: background-color 120ms ease-out, opacity 120ms ease-out, transform 80ms ease-out;
}

/* Mouse-down — a small shrink so the press feels physical and
   reactive. Faster transition than hover (80ms) so the response is
   immediate on press. Skipped when disabled (no affordance there). */
.button-primary:active:not(:disabled),
.button-secondary:active:not(:disabled),
.button-danger:active:not(:disabled) {
  transform: scale(0.96);
}

/* Keyboard focus — replace the default browser outline with a soft
   ring in the same brown as the primary text. Visible enough for
   keyboard nav, quiet enough not to read as a mistake on a mouse
   click. :focus-visible only — mouse-click focus stays clean. */
.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background-color-1), 0 0 0 4px var(--font-color-1);
}

/* Disabled — applied to any of the three variants. Quiet down with
   opacity rather than swapping colors so the variant identity stays
   readable. */
.button-primary:disabled,
.button-secondary:disabled,
.button-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== Primary =====
   Dark fill, cream text. The strongest call-to-action on a given
   screen: Save profile, Sign in, Create profile, Begin (dynasty),
   Start a new dynasty, modal Confirm. One per row, typically. */
.button-primary {
  background: var(--font-color-1);
  color: var(--background-color-1);
}

.button-primary:hover:not(:disabled) {
  background: #423a30;
}

/* ===== Secondary =====
   White fill, muted text. "Also an option" affordance — Cancel,
   Change password, Log out, Past Dynasties, Change language. Sits
   beside a primary or as a quieter standalone action. */
.button-secondary {
  background: var(--background-color-3);
  color: var(--font-color-2);
}

.button-secondary:hover:not(:disabled) {
  /* Light gray fill — darker than --background-color-2 (the body wash)
     so the button stays visibly distinct on hover. Earlier this rule
     used --background-color-2 directly, which made the button merge
     into the body wash on modals and disappear visually. */
  background: #e2d8c5;
  color: var(--font-color-1);
}

/* ===== Danger =====
   Soft coral fill, white text. Destructive actions only — Delete
   profile, End the line. The salmon hue is muted enough to fit the
   cream/brown/sage palette but saturated enough to read as a warning
   at a glance. */
.button-danger {
  background: var(--background-color-danger);
  color: var(--background-color-3);
}

.button-danger:hover:not(:disabled) {
  background: #b46050;
}