/* =============================================================
   VDJX — Tema condiviso del portale (design tokens + base).
   UNICA FONTE DI VERITÀ per colori, spaziature, tipografia, raggi.
   Modifica qui → cambia il look di TUTTO il portale.
   Identità: dark + accento blu (invariata), contrasto migliorato.
   ============================================================= */
:root {
  /* Superfici */
  --bg:#0f0f13; --panel:#16161c; --panel2:#1c1c24; --panel3:#22222e;
  --border:rgba(255,255,255,0.07); --border2:rgba(255,255,255,0.14);

  /* Testo — contrasto migliorato (prima: text2 #8888a0, text3 #45455a) */
  --text:#e8e8ec; --text2:#9a9ab2; --text3:#6e6e86;

  /* Accento + semantici */
  --accent:#4f7fff; --accent2:#3a6bff; --accent-soft:rgba(79,127,255,0.12);
  --green:#2ecc71; --red:#e74c3c; --orange:#f39c12; --purple:#9b59b6;

  /* Forma */
  --radius-sm:6px; --radius:8px; --radius-lg:12px;

  /* Spaziatura (ritmo costante) */
  --sp1:6px; --sp2:10px; --sp3:16px; --sp4:24px;

  /* Tipografia */
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

  /* Movimento + focus accessibile */
  --tr:0.15s ease;
  --focus:0 0 0 3px rgba(79,127,255,0.35);

  /* Alias di compatibilità (alcune pagine usano questi nomi) */
  --f:var(--font); --r:var(--radius);
  --danger:var(--red); --success:var(--green);
}

/* Focus visibile coerente su tutto il portale (accessibilità da tastiera) */
:focus-visible { outline:none; box-shadow:var(--focus); border-radius:var(--radius-sm); }

/* ── Componenti riutilizzabili (adozione graduale, prefisso vx-) ───────── */
.vx-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:500;
  color:var(--text);background:var(--panel2);border:1px solid var(--border2);border-radius:var(--radius);
  padding:8px 13px;cursor:pointer;transition:var(--tr);line-height:1}
.vx-btn:hover{border-color:var(--accent);color:#fff}
.vx-btn:active{transform:scale(0.98)}
.vx-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.vx-btn-primary:hover{background:var(--accent2)}
.vx-btn-ghost{background:transparent}

.vx-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--tr)}
.vx-card:hover{border-color:var(--border2)}

.vx-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text3);
  border:1px solid var(--border);border-radius:7px;padding:4px 9px}

.vx-input{width:100%;background:var(--panel2);border:1px solid var(--border2);border-radius:var(--radius);
  padding:8px 11px;font:inherit;font-size:13px;color:var(--text);outline:none;transition:var(--tr)}
.vx-input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.vx-input::placeholder{color:var(--text3)}

/* Barra di scorrimento discreta e coerente */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
*::-webkit-scrollbar-track{background:transparent}