/* ==========================================================================
   Innovando – Buttons
   Varianti: .btn--primary .btn--outline .btn--ghost .btn--soft
   Effetto "firma": .btn--fx-01 (shine + border shift)
   Taglie: .btn--sm .btn--lg / Larghezze: .btn--block
   Accessibilità: focus visibile, contrasto AA, reduced-motion
   Dipendenze token: --accent, --brand, --brand-2, --ink-800, --ink-100
   ========================================================================== */

/* Base */
.btn{
  --btn-bg:        var(--accent);
  --btn-ink:       #fff;
  --btn-border:    transparent;
  --btn-radius:    999px;
  --btn-shadow:    0 1px 1px rgba(0,0,0,.06), 0 4px 10px rgba(0,0,0,.06);

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;

  padding: .65rem 1.1rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600; line-height: 1; text-decoration: none;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); filter: saturate(1.05); }

/* Focus visibile */
.btn:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 40%, white);
  outline-offset: 3px;
}

/* Disabilitato */
.btn[disabled], .btn:disabled, .btn.is-disabled{
  opacity: .6; cursor: not-allowed; transform: none; filter: none;
  box-shadow: none;
}

/* Taglie */
.btn--sm{ padding: .45rem .8rem; font-weight: 600; }
.btn--lg{ padding: .85rem 1.25rem; font-size: 1.05rem; }
.btn--block{ display: inline-flex; width: 100%; }

/* Varianti cromatiche */
.btn--primary{
  --btn-bg: var(--accent);
  --btn-ink: #fff;
  --btn-border: color-mix(in oklab, var(--accent) 70%, black);
}

.btn--outline{
  --btn-bg: transparent;
  --btn-ink: var(--accent);
  --btn-border: var(--accent);
  box-shadow: none;
}
.btn--outline:hover{
  background: color-mix(in oklab, var(--accent) 10%, white);
}

.btn--ghost{
  --btn-bg: transparent;
  --btn-ink: var(--ink-800);
  --btn-border: transparent;
  box-shadow: none;
}
.btn--ghost:hover{
  background: color-mix(in oklab, var(--ink-800) 7%, transparent);
}

.btn--soft{
  --btn-bg: color-mix(in oklab, var(--accent) 12%, white);
  --btn-ink: color-mix(in oklab, var(--accent) 80%, black);
  --btn-border: color-mix(in oklab, var(--accent) 40%, white);
}

/* Effetto firma: shine + bordo che “scorre” */
.btn--fx-01{
  overflow: hidden;
  isolation: isolate;
}
.btn--fx-01::before,
.btn--fx-01::after{
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
}

/* Bordi “dinamici” */
.btn--fx-01::before{
  border: 1.5px solid currentColor;
  opacity: .18;
  translate: -100% 0;
  transition: translate .35s ease;
}
.btn--fx-01:hover::before{ translate: 0 0; }

/* Luccichio diagonale */
.btn--fx-01::after{
  width: 40%; aspect-ratio: 1 / 1; rotate: 25deg;
  top: -120%; left: -20%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.45) 40%,
    rgba(255,255,255,.0) 70%);
  filter: blur(8px);
  transition: transform .45s ease, opacity .3s ease;
  transform: translateX(-50%);
  opacity: .0;
}
.btn--fx-01:hover::after{
  transform: translateX(320%);
  opacity: .9;
}

/* Icone dentro i bottoni (se servono) */
.btn .icon{ display: inline-flex; translate: 0 1px; }

/* Dark mode — aggiusta inchiostro/contrasto */
html.theme-dark .btn--ghost{
  --btn-ink: #eee;
}
html.theme-dark .btn--outline:hover{
  background: color-mix(in oklab, var(--accent) 18%, black);
}
html.theme-dark .btn--soft{
  --btn-bg: color-mix(in oklab, var(--accent) 18%, black);
  --btn-ink: #fff;
  --btn-border: color-mix(in oklab, var(--accent) 55%, black);
}

/* Riduci animazioni se richiesto */
@media (prefers-reduced-motion: reduce){
  .btn, .btn--fx-01::before, .btn--fx-01::after{ transition: none !important; }
}