/* =========================================================
   Button — pill primario del sito
   Fonte: assets/pagine/{S,XL}.png
     - CTA "Download my entire Resumè": XL x 686..1043 y 3235..3291
       (357x57), S x 46..355 y 3885..3941 (310x57)
     - Submit "Send": XL 143x57, S 143x57
   Le due pillole sono lo STESSO componente nelle tavole (stesso blu,
   stessa altezza 57px, stesso raggio pieno): qui diventa una classe
   sola, .btn, usata sia dalla CTA del Resumè sia dal Send del form —
   prima la CTA non aveva alcuno stile (bottone di sistema) ed era
   l'unico elemento del sito fuori dal design.

   MISURE (non a occhio):
     altezza 57px          -> min-height 56px (14x --space-1)
     padding-inline 26px S / 50px XL -> --space-5 / --space-7
     testo largo 259px     -> Plus Jakarta Sans bold 19px
   Il 19px non e' sulla scala tipografica (16 body / 22 h5) e non
   introduco un token nuovo per un solo elemento: resta --font-size-body,
   3px piu piccolo del mockup ma sulla scala. Il resto (altezza, raggio,
   paddings) e' quello misurato, quindi la pillola ha la stessa stazza.
   Token: tokens.css
   ========================================================= */

:root {
  --btn-duration: 200ms;
  --btn-ease: ease;                                  /* colore */
  --btn-ease-out: cubic-bezier(0.23, 1, 0.32, 1);     /* sollevamento */
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* solo transform/opacity/colore: niente proprieta' che fanno layout */
  transition:
    background-color var(--btn-duration) var(--btn-ease),
    transform var(--btn-duration) var(--btn-ease-out),
    box-shadow var(--btn-duration) var(--btn-ease-out);
}

@media (min-width: 900px) {
  .btn {
    padding-inline: var(--space-7);
  }
}

.btn--primary {
  background: var(--color-blue);
  color: var(--color-white);
  /* Non nelle tavole (che disegnano la pillola piatta): un'ombra
     nello stesso blu, appena percepibile, cosi il bottone in hover
     sembra sollevarsi invece di cambiare solo colore. */
  box-shadow: 0 6px 16px -8px rgba(0, 143, 240, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--color-blue-2);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(0, 143, 240, 0.55);
  }
}

/* Press: la scala scende sotto 1 e la transizione si accorcia, cosi il
   feedback e' immediato (il rientro resta piu morbido). */
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 110ms;
}

.btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 1ms;
  }
}