/* ============================================================
   DS-BUTTONS.CSS  —  De Sisti Button System
   Sistema centralizzato per tutti i pulsanti del sito.

   TASSONOMIA:
     .ds-btn                  base (reset + font + transizioni)
     .ds-btn--primary         RFQ, invio, azione principale
     .ds-btn--secondary       apri modal, download, link sezione
     .ds-btn--toggle          Metric/Imperial, range pill, tab
     .ds-btn--instrument      controlli tecnici (fotometrie, beam)
     .ds-btn--ghost           utility: Close, Cancel, Clear

   USO:
     <button class="ds-btn ds-btn--primary">Request a Quote</button>
     <button class="ds-btn ds-btn--toggle is-active">Metric</button>
     <button class="ds-btn ds-btn--instrument">Beam</button>

   SIZING MODIFIER:
     (default = md)
     .ds-btn--lg   → 42px, font-size base
     .ds-btn--sm   → 28px, font-size xs

   STATO ATTIVO:
     .is-active     → usato su toggle (sostituisce aria-pressed per CSS)
     aria-pressed   → usato per accessibilità (supportato nativamente)
   ============================================================ */


/* ── BASE ──────────────────────────────────────────────────── */
.ds-btn {
  /* Reset */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;

  /* Dimensioni default — 32px = stessa delle fotometrie (riferimento) */
  height: var(--ds-btn-h-md, 32px);
  padding: 0 0.8rem;
  border-radius: var(--ds-btn-r, 999px);

  /* Tipografia — identica alle fotometrie (riferimento equilibrato) */
  font-family: var(--ds-btn-font, "Oswald", system-ui);
  font-size: 0.78rem;   /* 12.5px — stessa delle fotometrie */
  font-weight: 600;
  letter-spacing: 0.02em;   /* come fotometrie — non troppo espanso */
  text-transform: uppercase;
  line-height: 1;

  /* Transizioni */
  transition:
    background-color var(--ds-btn-dur, 200ms) var(--ds-ease-std),
    border-color     var(--ds-btn-dur, 200ms) var(--ds-ease-std),
    color            var(--ds-btn-dur, 200ms) var(--ds-ease-std),
    transform        120ms var(--ds-ease-std),
    box-shadow       var(--ds-btn-dur, 200ms) var(--ds-ease-std);

  /* Focus accessibile */
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.ds-btn:focus-visible {
  outline-color: var(--ds-c-focus, #F4B532);
}
.ds-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── SIZING MODIFIERS ──────────────────────────────────────── */
.ds-btn--lg {
  height: var(--ds-btn-h-lg, 40px);
  padding: 0 20px;
  font-size: 0.84rem;   /* 13.4px — leggermente sopra il default */
  letter-spacing: 0.04em;
  gap: 8px;
}
.ds-btn--sm {
  height: var(--ds-btn-h-sm, 24px);
  padding: 0 10px;
  font-size: 0.68rem;   /* 10.9px — per range pills, header */
  letter-spacing: 0.06em;
  gap: 3px;
}


/* ── PRIMARY ────────────────────────────────────────────────
   RFQ, invia, azioni principali di conversione.
   Amber #F4B532 riempito — "luce di tungsteno".
   ──────────────────────────────────────────────────────────  */
.ds-btn--primary {
  font-weight: 700;   /* Bold — CTA principale, massima leggibilità */
  background: var(--ds-btn-primary-bg, #F4B532);
  color:      var(--ds-btn-primary-text, #1A1714);
  border: 1px solid transparent;
  /* Sess.25 flat-ten: niente 3D drop. Microelevation + transizione per
     l'effetto "lift" su hover (Vercel/Linear pattern). */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    transform  120ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
.ds-btn--primary:hover:not(:disabled) {
  background: var(--ds-btn-primary-bg-hov, #E8C000);
  /* Hover-fill effect: glow ambra che si espande senza spostare il bottone. */
  box-shadow:
    0 0 0 1px rgba(201,168,0,0.45),
    0 6px 18px rgba(255,209,0,0.30),
    0 1px 4px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.ds-btn--primary:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
/* Dark mode: stesso colore brand, glow più intenso su nero. */
body.ds-dark .ds-btn--primary {
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
body.ds-dark .ds-btn--primary:hover:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(201,168,0,0.55),
    0 6px 22px rgba(255,209,0,0.38),
    0 2px 6px rgba(0,0,0,0.50);
}


/* ── SECONDARY ──────────────────────────────────────────────
   Apri modal, download, link sezione.
   Glass pill trasparente con bordo — si "accende" al hover.
   ──────────────────────────────────────────────────────────  */
.ds-btn--secondary {
  background: var(--ds-btn-secondary-bg, transparent);
  color:      var(--ds-btn-secondary-text, var(--ds-c-text));
  border: 1px solid var(--ds-btn-secondary-bd, rgba(0,0,0,0.14));
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), inset 0 1px rgba(255,255,255,0.80);
}
.ds-btn--secondary:hover:not(:disabled) {
  background:   var(--ds-btn-secondary-bg-hov, rgba(244,181,50,0.08));
  border-color: var(--ds-btn-secondary-bd-hov, rgba(244,181,50,0.55));
  box-shadow: 0 4px 14px rgba(0,0,0,0.08), inset 0 1px rgba(255,255,255,0.90);
  transform: translateY(-1px);
}
body.ds-dark .ds-btn--secondary {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 2px 8px rgba(0,0,0,0.30), inset 0 1px rgba(255,255,255,0.06);
}
body.ds-dark .ds-btn--secondary:hover:not(:disabled) {
  background:   rgba(244,181,50,0.12);
  border-color: rgba(244,181,50,0.45);
}


/* ── TOGGLE / PILL ──────────────────────────────────────────
   Metric/Imperial, range pills, tab mode.
   Inattivo: glass bianco — Attivo: amber #F4B532.
   Stato attivo: classe .is-active o aria-pressed="true".
   ──────────────────────────────────────────────────────────  */
.ds-btn--toggle {
  background: var(--ds-btn-toggle-off-bg, rgba(255,255,255,0.80));
  color:      var(--ds-btn-toggle-off-text, var(--ds-c-text));
  border: 1px solid var(--ds-btn-toggle-off-bd, rgba(0,0,0,0.09));
  /* Sess.25 task #3 step5: flat-ten — niente drop shadow legacy. */
  box-shadow: none;
  transition:
    background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    border-color 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)),
    box-shadow 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1));
}
.ds-btn--toggle:hover:not(:disabled):not(.is-active):not([aria-pressed="true"]) {
  background:   rgba(244,181,50,0.12);
  border-color: rgba(244,181,50,0.40);
}
.ds-btn--toggle.is-active,
.ds-btn--toggle[aria-pressed="true"] {
  background:   var(--ds-btn-toggle-on-bg,   #F4B532);
  color:        var(--ds-btn-toggle-on-text,  #1A1714);
  border-color: var(--ds-btn-toggle-on-bd,    #C8860A);
  /* Glow ambra subtle invece di drop shadow 3D */
  box-shadow: 0 0 0 1px rgba(201,168,0,0.30), 0 2px 8px rgba(255,209,0,0.22);
}
body.ds-dark .ds-btn--toggle {
  background:   rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
body.ds-dark .ds-btn--toggle.is-active,
body.ds-dark .ds-btn--toggle[aria-pressed="true"] {
  background:   var(--ds-brand-yellow-dark);
  border-color: #C8860A;
  color: #1A1714;
}


/* ── INSTRUMENT ─────────────────────────────────────────────
   Controlli tecnici: beam, field, marker, distanze.
   Amber scuro #C8860A — "scala millimetrata, cruscotto ottico".
   ──────────────────────────────────────────────────────────  */
.ds-btn--instrument {
  background: var(--ds-btn-instr-bg, #C8860A);
  color:      var(--ds-btn-instr-text, #FFFFFF);
  border: 1px solid rgba(0,0,0,0.20);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 8px rgba(0,0,0,0.20);
  font-family: var(--ds-font-display, "ConthraxSB", "Oswald", sans-serif);
  letter-spacing: 0.08em;
}
.ds-btn--instrument:hover:not(:disabled) {
  background: var(--ds-btn-instr-bg-hov, #B07308);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 12px rgba(0,0,0,0.25);
  transform: translateY(-1px);
}
.ds-btn--instrument.is-active,
.ds-btn--instrument[aria-pressed="true"] {
  background: #965E04;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.30) inset,
    0 1px 4px rgba(0,0,0,0.20);
  transform: translateY(0) scale(0.98);
}


/* ── GHOST / UTILITY ────────────────────────────────────────
   Close, Cancel, Clear — minimale, non distrae.
   ──────────────────────────────────────────────────────────  */
.ds-btn--ghost {
  background:   var(--ds-btn-ghost-bg, transparent);
  color:        var(--ds-btn-ghost-text, var(--ds-c-text-secondary));
  border: 1px solid var(--ds-btn-ghost-bd, rgba(0,0,0,0.14));
}
.ds-btn--ghost:hover:not(:disabled) {
  background: var(--ds-btn-ghost-bg-hov, rgba(0,0,0,0.05));
  color: var(--ds-c-text);
}
body.ds-dark .ds-btn--ghost {
  border-color: rgba(255,255,255,0.12);
}
body.ds-dark .ds-btn--ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--ds-c-text);
}


/* ── ICON ONLY ──────────────────────────────────────────────
   Pulsante solo icona (es. chiudi modale).
   ──────────────────────────────────────────────────────────  */
.ds-btn--icon {
  width: var(--ds-btn-h-md, 34px);
  height: var(--ds-btn-h-md, 34px);
  padding: 0;
  border-radius: 50%;
}
.ds-btn--icon.ds-btn--lg {
  width: var(--ds-btn-h-lg, 42px);
  height: var(--ds-btn-h-lg, 42px);
}
.ds-btn--icon.ds-btn--sm {
  width: var(--ds-btn-h-sm, 28px);
  height: var(--ds-btn-h-sm, 28px);
}


/* ── CHEVRON ICON INTEGRATO ─────────────────────────────────
   .ds-btn .ds-btn__chev — rota 180° quando il genitore è aperto.
   ──────────────────────────────────────────────────────────  */
.ds-btn .ds-btn__chev {
  flex-shrink: 0;
  transition: transform var(--ds-btn-dur, 200ms) var(--ds-ease-std);
}
.ds-btn[aria-expanded="true"] .ds-btn__chev,
.ds-btn.is-open .ds-btn__chev {
  transform: rotate(180deg);
}


/* ── BRAND DOUBLE-LINE ACCENT ───────────────────────────────
   Opzionale: aggiunge la doppia linea brand sopra il pulsante
   primario in contesti dove è isolato (es. rail RFQ CTA).
   ──────────────────────────────────────────────────────────  */
.ds-btn--primary.ds-btn--accented {
  position: relative;
  margin-top: calc(var(--ds-line-h-thick-h,4px) + var(--ds-line-gap,2px) + var(--ds-line-h-thin-h,2px) + 8px);
}
.ds-btn--primary.ds-btn--accented::before,
.ds-btn--primary.ds-btn--accented::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  border-radius: 2px;
}
.ds-btn--primary.ds-btn--accented::before {
  top: calc(-1 * (var(--ds-line-h-thick-h,4px) + var(--ds-line-gap,2px) + var(--ds-line-h-thin-h,2px) + 8px));
  height: var(--ds-line-h-thick-h, 4px);
  background: var(--ds-c-line-thick);
}
.ds-btn--primary.ds-btn--accented::after {
  top: calc(-1 * (var(--ds-line-gap,2px) + var(--ds-line-h-thin-h,2px) + 8px));
  height: var(--ds-line-h-thin-h, 2px);
  background: var(--ds-c-line-thin);
}