/* ==========================================================================
   Gott och Blandat — Buttons
   Overrides the starterkit button component with token colours.
   Primary = purple accent fill, secondary = quiet surface with border.
   ========================================================================== */

.button,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.5em 1.1em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  border-color: var(--color-ink-tertiary);
  color: var(--color-ink);
  text-decoration: none;
}

.button--primary,
.button-action,
input[type="submit"].button--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.button--primary:hover,
.button-action:hover,
input[type="submit"].button--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.button--small {
  font-size: var(--text-xs);
  padding: 0.45em 0.95em;
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button--danger {
  background: transparent;
  border-color: var(--color-critical);
  color: var(--color-critical-ink);
}

.button--danger:hover {
  background: var(--color-critical-tint);
  border-color: var(--color-critical);
  color: var(--color-critical-ink);
}