/* ==============================================================================
   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. Square on purpose: a plan has no round corners
   (doc/07), and the showcase's controls, the contact form's fields and
   every button already are, so the corner is decided here once for the
   hero, the call to action, the form and the error pages alike. A
   <button> does not inherit the page's font on its own, so without
   font-family the contact form's was set in the system face while the
   links styled as buttons were in Poppins. */
.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: 0;
  font-family: inherit;
  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;
}

.btn-primary {
  background: var(--accent-blue);
  /* Not a hardcoded white: every dark block brightens --accent-blue for
     its OTHER job (readable link text on a dark surface), which drops
     white-on-accent under 3:1 there. --accent-contrast carries the pair
     that stays >= 4.5:1 in both the light and the dark value of every
     skin (see tokens.css/skins.css). */
  color: var(--accent-contrast);
}

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