/* ==============================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================================================== */

/* .btn-secondary, .fixed-button and its position variants, and .btn-go-top
   all matched nothing left in templates/ — they styled the floating
   action buttons, the "back to top" button and the contact/info/shortcuts
   modals task 5 removed. .btn-go-top survived one review round because
   static/js/app-functions.js still queried it, but that JS was itself
   dead (nothing rendered a .btn-go-top element for it to find), so it
   went too (review round 2, task 5); this file now only has what
   templates/blocks/hero.html, cta.html and partials/contact-form.html
   actually render. */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-normal, 0.3s ease),
    transform var(--transition-normal, 0.3s ease),
    box-shadow var(--transition-normal, 0.3s ease);
  text-decoration: none;
}

/* Solid buttons are the slate of the third tone since 13 October 2026
   (tokens.css), not the violet of the links, so an action reads apart
   from a link. Not a hardcoded white either: the dark mode lightens the
   slate and puts a dark ink on it. --button-bg/--button-text carry a
   pair measured >= 4.5:1 in both modes of every skin (5.1:1 light, 6.1:1
   dark, 4.7:1 / 5.1:1 under the hover below; calida and noche point them
   back at their own accent pair, see skins.css). */
.btn-primary {
  background: var(--button-bg);
  color: var(--button-text);
}

.btn-primary:hover {
  /* A fixed hex here only ever looked right on one skin; the slate,
     noche's violet and calida's terracotta need to darken from whatever
     --button-bg actually is, not jump to an unrelated colour. */
  filter: brightness(0.88);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}