/* ==========================================================================
   WORLDZ DESIGN SYSTEM — wz-tokens.css · v2.0 · 2026-08-05
   Fondazione UX/UI del pannello WS (ws.worldz.net).
   REGOLE: _sandbox/ws_design_system/REGOLE_UX_UI.md (repo Worldz)

   LINGUAGGIO (v2 — sostituisce il vetro/aurora della v1):
   "La rete che si propaga". Inchiostro, linee sottili (hairline), forme nette.
   Il teal non è una superficie: è un IMPULSO che attraversa la rete. Niente
   blur, niente gradienti decorativi, niente ombre morbide su fondo scuro.

   PRINCIPI (non negoziabili):
   1. ADDITIVO — nessun reset globale, nessun override di Bootstrap/onepress.
      Tutto è opt-in tramite classi prefissate .wz-*.
   2. TOKEN-FIRST — i valori vivono qui. Le pagine non inventano valori nuovi.
   3. DUE SUPERFICI — "Rete" (scura: accesso, hero) e "Plancia" (gestionale
      chiaro). Stessi token, stessa grammatica: hairline + impulso teal.
   ========================================================================== */

:root {
  /* ---- Brand: il teal è l'unico colore d'azione ------------------------ */
  --wz-brand:      #04bfbf;
  --wz-brand-hi:   #35e8e8;  /* impulso acceso, focus su scuro */
  --wz-brand-deep: #028a8a;  /* hover su superficie chiara */
  --wz-brand-dim:  rgba(4, 191, 191, 0.14);  /* traccia, sfondo di stato */
  --wz-gold:       #cba05c;  /* accento raro (badge). Mai per azioni */

  /* ---- Superficie "Rete" (scura) --------------------------------------- */
  --wz-ink-0:   #05070a;   /* pagina */
  --wz-ink-1:   #0a0e15;   /* pannello */
  --wz-ink-2:   #101720;   /* campo, riga alternata */
  --wz-hair:        rgba(255, 255, 255, 0.09);  /* filo: bordo standard */
  --wz-hair-strong: rgba(255, 255, 255, 0.18);  /* filo in hover */
  --wz-text:    #e8eef7;
  --wz-text-2:  #90a1b7;
  --wz-text-3:  #5f6f85;   /* legende, meta */

  /* ---- Superficie "Plancia" (gestionale chiaro) ------------------------ */
  --wz-bg:        #f6f8fb;
  --wz-surface:   #ffffff;
  --wz-line:      #e3e9f2;
  --wz-ink:       #17212f;
  --wz-ink-soft:  #5b6b80;

  /* ---- Semantici ------------------------------------------------------- */
  --wz-ok:     #22c58b;
  --wz-warn:   #f4b53f;
  --wz-error:  #ff5d6c;
  --wz-info:   var(--wz-brand);

  /* ---- Tipografia ------------------------------------------------------ */
  --wz-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Inter,
             "Helvetica Neue", Arial, sans-serif;
  --wz-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas,
                  "Roboto Mono", monospace;
  /* ⚠️ In PX, non in rem: il tema wsworldz imposta la radice a 14px, quindi
     i rem si rimpicciolivano del 12,5% e le label finivano a 10,5px —
     sotto il minimo di 12px che ci siamo dati. Le misure del design system
     non devono dipendere dalla radice del tema ospite. */
  --wz-fs-xs:   12px;                       /* label mono, meta — MINIMO assoluto */
  --wz-fs-sm:   14px;                       /* secondario */
  --wz-fs-md:   16px;                       /* corpo, input */
  --wz-fs-lg:   clamp(17px, 1.4vw, 19px);   /* sottotitoli */
  --wz-fs-xl:   clamp(20px, 2vw, 24px);     /* titoli sezione */
  --wz-fs-hero: clamp(32px, 4.2vw, 52px);   /* statement */
  --wz-lh-tight: 1.08;   /* statement: righe strette, da manifesto */
  --wz-lh-body:  1.55;
  --wz-track-tight: -0.025em;  /* titoli grandi */
  --wz-track-mono:   0.10em;   /* label/eyebrow monospace maiuscole */

  /* ---- Spazio (base 4px) ---------------------------------------------- */
  --wz-sp-1: 4px;  --wz-sp-2: 8px;   --wz-sp-3: 12px; --wz-sp-4: 16px;
  --wz-sp-5: 20px; --wz-sp-6: 24px;  --wz-sp-8: 32px; --wz-sp-10: 40px;
  --wz-sp-12: 48px; --wz-sp-16: 64px;

  /* ---- Raggi: stretti = strumento, non bolla --------------------------- */
  --wz-r-sm: 6px; --wz-r-md: 10px; --wz-r-lg: 14px; --wz-r-xl: 18px;
  --wz-r-pill: 999px;

  /* ---- Elevazione ------------------------------------------------------
     Su scuro NON si usano ombre: si usa il filo (hairline) e l'impulso.   */
  --wz-shadow-1: 0 1px 2px rgba(10, 20, 40, 0.06), 0 4px 12px rgba(10, 20, 40, 0.06);
  --wz-shadow-2: 0 8px 30px rgba(10, 20, 40, 0.12);
  --wz-pulse:    0 0 0 1px var(--wz-brand), 0 0 0 4px var(--wz-brand-dim);

  /* ---- Motion ---------------------------------------------------------- */
  --wz-t-fast: 120ms;  /* hover, press */
  --wz-t-med:  220ms;  /* tab, apparizioni */
  --wz-t-slow: 420ms;  /* entrata di pagina */
  --wz-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --wz-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Z-scale --------------------------------------------------------- */
  --wz-z-nav: 100; --wz-z-overlay: 500; --wz-z-toast: 900;
}

/* ==========================================================================
   COMPONENTI BASE (opt-in, funzionano su entrambe le superfici)
   ========================================================================== */

/* ---- Autosufficienza: non dipendiamo dal reset di Bootstrap ------------ */
.wz-btn, .wz-input, .wz-field, .wz-inputwrap, .wz-check, .wz-card,
.wz-surface, .wz-notice, .wz-tabs, .wz-tab { box-sizing: border-box; }

/* ---- Focus: SEMPRE visibile, mai outline:none senza sostituto ----------
   ⚠️ `style.css` del tema apre con `* { box-shadow: none !important;
   outline: none !important; }` (righe 15-18): azzera OGNI indicatore di
   focus del sito. Senza `!important` qui, chi naviga da tastiera non vede
   dove si trova. È l'unico caso in cui lo usiamo: battere un `!important`
   altrui, mai per vincere di specificità.
   → il tema andrebbe corretto alla radice (segnalato al CTO). */
.wz-btn:focus-visible, .wz-input:focus-visible, .wz-tab:focus-visible,
.wz-link:focus-visible, .wz-check input:focus-visible, .wz-peek:focus-visible {
  outline: 2px solid var(--wz-brand-hi) !important;
  outline-offset: 2px !important;
  border-radius: var(--wz-r-sm);
}

/* ---- Bottoni: tinta piena, niente gradienti ---------------------------- */
.wz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wz-sp-2);
  min-height: 48px;                 /* target touch ≥44px: regola fissa */
  padding: 0 var(--wz-sp-6);
  border: 1px solid transparent; border-radius: var(--wz-r-md);
  font-family: var(--wz-font); font-size: var(--wz-fs-md); font-weight: 650;
  letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  transition: background var(--wz-t-fast) var(--wz-ease),
              border-color var(--wz-t-fast) var(--wz-ease),
              color var(--wz-t-fast) var(--wz-ease),
              transform var(--wz-t-fast) var(--wz-ease);
}
.wz-btn:active { transform: translateY(1px); }

.wz-btn--primary { color: #02231f; background: var(--wz-brand); }
.wz-btn--primary:hover { background: var(--wz-brand-hi); }

.wz-btn--ghost {
  color: var(--wz-text); background: transparent; border-color: var(--wz-hair);
}
.wz-btn--ghost:hover { border-color: var(--wz-brand); color: var(--wz-brand-hi); }

/* Stato caricamento: aggiunto dal JS al submit, non blocca l'invio nativo */
.wz-btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.wz-btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid rgba(2, 35, 31, 0.3);
  border-top-color: #02231f;
  animation: wz-spin 0.7s linear infinite;
}
@keyframes wz-spin { to { transform: rotate(360deg); } }

/* ---- Campi form -------------------------------------------------------
   Label SEMPRE visibile sopra il campo, in mono maiuscolo: è la voce
   "strumento" del sistema. Mai il placeholder come etichetta.            */
.wz-field { display: flex; flex-direction: column; gap: 7px; }
.wz-label {
  font-family: var(--wz-font-mono); font-size: var(--wz-fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--wz-track-mono);
  color: var(--wz-text-2);
}
.wz-input {
  width: 100%; min-height: 48px;
  padding: 12px 14px;
  font-family: var(--wz-font); font-size: var(--wz-fs-md);
  color: var(--wz-text);
  background: var(--wz-ink-2);
  border: 1px solid var(--wz-hair);
  border-radius: var(--wz-r-md);
  transition: border-color var(--wz-t-fast) var(--wz-ease),
              box-shadow var(--wz-t-fast) var(--wz-ease);
}
.wz-input::placeholder { color: var(--wz-text-3); }
.wz-input:hover { border-color: var(--wz-hair-strong); }
.wz-input:focus {
  outline: none; border-color: var(--wz-brand);
  box-shadow: var(--wz-pulse) !important;   /* vedi nota sul `*` del tema */
}
.wz-input[aria-invalid="true"] {
  border-color: var(--wz-error);
  box-shadow: 0 0 0 1px var(--wz-error), 0 0 0 4px rgba(255, 93, 108, 0.14) !important;
}

/* ---- Checkbox: quadrata, netta ----------------------------------------- */
.wz-check { display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--wz-fs-sm); color: var(--wz-text-2); cursor: pointer; }
.wz-check input {
  appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--wz-hair-strong); border-radius: var(--wz-r-sm);
  background: var(--wz-ink-2); cursor: pointer; display: grid; place-content: center;
  transition: background var(--wz-t-fast) var(--wz-ease),
              border-color var(--wz-t-fast) var(--wz-ease);
}
.wz-check input::before {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  transition: transform var(--wz-t-fast) var(--wz-ease-out);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #02231f;
}
.wz-check input:checked { background: var(--wz-brand); border-color: var(--wz-brand); }
.wz-check input:checked::before { transform: scale(1); }

/* ---- Superfici ---------------------------------------------------------
   .wz-surface = pannello su scuro (filo + tinta piena, MAI blur).
   .wz-card    = card su chiaro (Plancia).                                 */
.wz-surface {
  background: var(--wz-ink-1);
  border: 1px solid var(--wz-hair);
  border-radius: var(--wz-r-lg);
}
.wz-card {
  background: var(--wz-surface);
  border: 1px solid var(--wz-line);
  border-radius: var(--wz-r-lg);
  box-shadow: var(--wz-shadow-1);
}

/* ---- Notice: barra di stato a sinistra, nessun fondo colorato ---------- */
.wz-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--wz-r-md);
  font-size: var(--wz-fs-sm); line-height: var(--wz-lh-body);
  background: var(--wz-ink-2); border: 1px solid var(--wz-hair);
  border-left: 2px solid var(--wz-hair-strong);
  color: var(--wz-text);
}
.wz-notice--ok    { border-left-color: var(--wz-ok); }
.wz-notice--warn  { border-left-color: var(--wz-warn); }
.wz-notice--error { border-left-color: var(--wz-error); }

/* ---- Testo -------------------------------------------------------------- */
.wz-kicker {
  font-family: var(--wz-font-mono); font-size: var(--wz-fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--wz-track-mono);
  color: var(--wz-brand-hi);
}
.wz-link { color: var(--wz-brand-hi); text-decoration: none;
  border-bottom: 1px solid rgba(53, 232, 232, 0.3);
  transition: border-color var(--wz-t-fast) var(--wz-ease),
              color var(--wz-t-fast) var(--wz-ease); }
.wz-link:hover { color: #fff; border-bottom-color: #fff; }

/* ---- Utility ------------------------------------------------------------ */
.wz-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Motion: rispetto totale di prefers-reduced-motion ------------------ */
@media (prefers-reduced-motion: reduce) {
  .wz-btn, .wz-input, .wz-check input { transition: none; }
  .wz-btn.is-loading::after { animation-duration: 1.4s; }
}