/* JoeSING — token del sistema visivo. */

:root {
    --js-fondo:            rgb(30, 27, 46);
    --js-fondo:            oklch(0.15 0.035 275);   /* notte blu-viola profondo */
    --js-scheda:           rgb(48, 44, 71);
    --js-scheda:           oklch(0.22 0.04 269);    /* pannelli e schede */
    --js-superficie:       rgb(54, 49, 78);
    --js-superficie:       oklch(0.24 0.045 269);   /* superfici sollevate */
    --js-superficie-alta:  rgb(62, 57, 88);
    --js-superficie-alta:  oklch(0.28 0.05 269);

    --js-testo:            rgb(250, 250, 252);
    --js-testo:            oklch(0.98 0.005 260);   /* bianco caldo */
    --js-testo-tenue:      rgb(163, 160, 180);
    --js-testo-tenue:      oklch(0.72 0.03 265);    /* testi secondari */
    --js-testo-debole:     rgb(120, 117, 138);
    --js-testo-debole:     oklch(0.58 0.03 265);

    --js-primario:         rgb(155, 92, 214);
    --js-primario:         oklch(0.63 0.2 300);     /* viola elettrico */
    --js-primario-chiaro:  rgb(178, 124, 230);
    --js-primario-chiaro:  oklch(0.70 0.18 300);
    --js-primario-scuro:   rgb(120, 66, 175);
    --js-primario-scuro:   oklch(0.52 0.19 300);
    --js-su-primario:      rgb(255, 255, 255);
    --js-su-primario:      oklch(0.99 0 0);

    --js-accento:          rgb(94, 214, 174);
    --js-accento:          oklch(0.72 0.16 163);    /* verde menta: attivo, preferiti */
    --js-pericolo:         rgb(216, 76, 61);
    --js-pericolo:         oklch(0.62 0.22 25);     /* limite raggiunto, zona pericolo */
    --js-attenzione:       rgb(222, 170, 74);
    --js-attenzione:       oklch(0.76 0.14 80);
    --js-spotify:          rgb(29, 185, 84);        /* verde di marca, solo per il pulsante di collegamento */
    --js-apple:            rgb(250, 45, 72);        /* rosso di Apple Music, stesso uso */

    --js-bordo:            rgba(255, 255, 255, 0.10);   /* sottilissimo, mai netto */
    --js-bordo-forte:      rgba(255, 255, 255, 0.18);
    --js-velo:             rgba(10, 8, 20, 0.55);
    --js-ombra:            0 18px 45px rgba(0, 0, 0, 0.45);
    --js-alone:            0 0 32px rgba(155, 92, 214, 0.35);
    --js-alone-accento:    0 0 32px rgba(94, 214, 174, 0.30);

    --js-gradiente-marca:  linear-gradient(135deg, var(--js-primario), var(--js-accento));
    --js-gradiente-palco:  radial-gradient(120% 80% at 50% -10%,
                               oklch(0.28 0.09 295) 0%,
                               oklch(0.17 0.05 280) 45%,
                               oklch(0.11 0.02 275) 100%);

    --js-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, sans-serif;
    --js-font-testo:   system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --js-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --js-raggio-s:  10px;
    --js-raggio-m:  16px;
    --js-raggio-l:  24px;
    --js-raggio-xl: 32px;
    --js-raggio-pillola: 999px;

    --js-passo-1: 4px;
    --js-passo-2: 8px;
    --js-passo-3: 12px;
    --js-passo-4: 16px;
    --js-passo-5: 24px;
    --js-passo-6: 32px;
    --js-passo-7: 48px;
    --js-passo-8: 64px;

    /* Una sola curva per tutto: due curve diverse in due componenti vicini si notano e sembrano un difetto. */
    --js-transizione: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chi ha chiesto meno animazioni deve ottenerle: non e' un'opzione estetica, per alcune persone il moto e' un problema fisico. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --js-transizione: 1ms linear;
    }
}