/* ============================================================
   StyleKit — theme-vars.css
   Variabili di tema + selection + scrollbar.
   Personalizza SOLO QUESTO FILE per cambiare l'identità cromatica.
   ============================================================ */

:root {
    /* base */
    --bg: #0a0a0a;            /* sfondo pagina */
    --text: #e0e0e0;          /* testo principale */
    --dim: #a6a6a6;           /* testo secondario (leggibile su fondo scuro) */
    --border: #1a1a1a;        /* bordi contenitori */
    --accent: #8463a8;        /* colore firma del nodo */

    /* split cromatico per glitch (2 colori complementari) */
    --glitch-a: #ff4dd8;
    --glitch-b: #4df0ff;

    /* glow dei box reattivi: rgba completo, guidato da JS
       (intensità = prossimità cursore). Imposta un default. */
    --glowc: rgba(132, 99, 168, 0);
}

/* selezione testo coerente col tema */
::selection {
    background: rgba(132, 99, 168, 0.35);
    color: #fff;
}

/* scrollbar minimale */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #222; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* layout di base consigliato */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'SF Mono', 'Fira Code', 'IBM Plex Mono', 'Courier New', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

main {
    max-width: 600px;         /* colonna centrale (700/780/900 su 2K/4K) */
    width: 100%;
    margin: 0 auto;
    padding: 5rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;               /* sopra i canvas di sfondo */
}

footer {
    text-align: center;
    padding: 28px;
    font-size: 0.75rem;
    color: var(--dim);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 2;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* alta risoluzione: alza la base tipografica a scaglioni */
@media (min-width: 1900px) { html { font-size: 19px; } main { max-width: 700px; } }
@media (min-width: 2300px) { html { font-size: 21px; } main { max-width: 780px; } }
@media (min-width: 3000px) { html { font-size: 24px; } main { max-width: 900px; } }

/* rispetto preferenze utente */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}