/* Flow Scrum · Flow Kanban — i token dello stile unico (30/10/2026).
 *
 * Il primo foglio di stile di ogni pagina (index, flowlab, ingresso, demo, demo-flowlab): qui, e solo qui, un colore
 * si scrive col suo valore. Tutto il resto lo usa per nome, var(--sc-…). La guardia di tools/guardie.mjs lo controlla:
 * un esadecimale o un rgb() nuovo fuori da questo file fa fallire ./verify.sh (il debito di prima è in
 * tools/stile-debito.json e si può solo ridurre).
 *
 * Due blocchi:
 *   1. i token del sistema: colori per significato, caratteri, spazi, raggi, ombre, focus, altezze, livelli;
 *   2. i valori di area di oggi che non coincidono ancora coi token (città, board, retro, demo, marchio): le variabili
 *      vecchie (--yellow, --ink, --j-*, --r-*, --panel…) ne sono alias a valori identici, così questa PR non cambia
 *      un pixel. Le PR successive li fanno convergere sui token del blocco 1 e poi li tolgono.
 */

/* Manrope variabile, distribuito nell’app sotto OFL: viene scaricato solo nelle pagine del marchio. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* ------------------------------------------------------------------ 1. token del sistema */
:root {
  --sc-qr-fondo: #ffffff;
  --sc-qr-segno: #000000;
  /* colori per significato (tema scuro: città, Flow Kanban, Pannelli, guida) */
  --sc-fondo: #0f1620;               /* fondo della pagina */
  --sc-superficie: #17212d;          /* pannello pieno */
  --sc-superficie-2: #1e2a38;        /* card, campo, bottone secondario */
  --sc-superficie-3: #26354a;        /* una card sotto il mouse (board) */
  --sc-vetro: rgba(18, 24, 33, .78); /* pannello di vetro sopra la scena 3D */
  --sc-vetro-2: rgba(28, 36, 48, .92);
  --sc-vetro-scuro: rgba(16,22,30,.82); /* gruppi di comandi sopra un tavolo 3D (banco di Flow Kanban) */
  --sc-bordo: #2c3a4a;               /* bordo su superficie piena */
  --sc-bordo-tenue: rgba(255,255,255,.09); /* bordo su vetro */
  --sc-bordo-controllo: rgba(255, 255, 255, .14); /* bordo di bottoni secondari e campi: si vede su vetro e su superficie */
  --sc-secondario: rgba(255, 255, 255, .07);       /* fondo del bottone secondario */
  --sc-secondario-hover: rgba(255, 255, 255, .14);
  --sc-campo: rgba(255, 255, 255, .06);            /* fondo dei campi */
  --sc-testo: #eef2f6;
  --sc-testo-secondario: #9fb0c2;
  --sc-azione: #f2cd37;              /* il giallo d'azione: un solo primario per vista */
  --sc-azione-hover: #ffdb4d;
  --sc-su-azione: #1b1b1b;           /* testo su giallo */
  --sc-azione-tenue: rgba(242, 205, 55, .2);
  --sc-azione-bordo: rgba(242, 205, 55, .45);
  --sc-azione-velo: rgba(242, 205, 55, .06);   /* il fondo della card in evidenza */ /* il bordo di ciò che chiede una decisione (la conferma) */
  --sc-velo: rgba(6, 10, 14, .6);    /* sotto una finestra */
  --sc-info: #579dff;                /* link, selezione, stato «in corso» */
  --sc-info-tenue: rgba(87, 157, 255, .14);
  --sc-ok: #20bf6b;
  --sc-ok-tenue: rgba(32, 191, 107, .16);
  --sc-su-ok: #04210f;
  --sc-warn: #f7b731;
  --sc-warn-tenue: rgba(247, 183, 49, .16);
  --sc-danger: #ff6b5a;              /* il rosso solo per gli errori e le azioni che non si annullano */
  --sc-danger-tenue: rgba(255, 107, 90, .16);
  --sc-lego-rosso: #c91a09;          /* solo per i mattoncini */

  /* caratteri: la scala si moltiplica per --sc-scala (il proiettore la alza, PR 7) */
  --sc-scala: 1;
  --sc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, sans-serif;
  --sc-font-mono: ui-monospace, Menlo, monospace;
  --sc-t-xs: calc(11px * var(--sc-scala));
  --sc-t-s: calc(12.5px * var(--sc-scala));
  --sc-t-m: calc(14px * var(--sc-scala));
  --sc-t-l: calc(16px * var(--sc-scala));
  --sc-t-xl: calc(20px * var(--sc-scala));
  --sc-t-2xl: calc(26px * var(--sc-scala));
  --sc-t-display: calc(36px * var(--sc-scala));
  --sc-peso-normale: 400;
  --sc-peso-medio: 600;
  --sc-peso-forte: 700;

  /* spazi, raggi, ombre */
  --sc-spazio-1: 4px;
  --sc-spazio-2: 8px;
  --sc-spazio-3: 12px;
  --sc-spazio-4: 16px;
  --sc-spazio-5: 24px;
  --sc-spazio-6: 32px;
  --sc-raggio-s: 6px;                /* campi, chip */
  --sc-raggio-m: 10px;               /* bottoni, card */
  --sc-raggio-l: 14px;               /* pannelli, finestre */
  --sc-raggio-pillola: 999px;
  --sc-ombra-1: 0 2px 8px rgba(0, 0, 0, .3);      /* menu, tooltip */
  --sc-ombra-2: 0 8px 24px rgba(0, 0, 0, .35);    /* avvisi */
  --sc-ombra-3: 0 16px 40px rgba(0, 0, 0, .45);   /* finestre */
  --sc-ombra-barra: 0 4px 14px rgba(0,0,0,.28);    /* gruppi di comandi sul tavolo */
  --sc-ombra-tip: 0 10px 30px rgba(0,0,0,.45);     /* tooltip ricco (modello di .ui-tip) */

  /* focus da tastiera: un solo anello per tutta l'app (PR 2) */
  --sc-focus-colore: var(--sc-azione);
  --sc-focus-spessore: 3px;
  --sc-focus-distanza: 2px;
  --sc-focus-alone: 0 0 0 5px rgba(0, 0, 0, .55);  /* scuro sotto l'anello: si vede su ogni fondo */

  /* altezze dei controlli (44 = bersaglio minimo al proiettore e al tocco) */
  --sc-h-s: 28px;
  --sc-h-m: 36px;
  --sc-h-l: 44px;

  /* livelli */
  --sc-z-barra: 10;
  --sc-z-board: 40;
  --sc-z-tip: 95;                    /* il tooltip dell'app: sopra tutto, anche sopra gli avvisi */
  --sc-z-avvisi: 90;                /* sopra il velo di ogni finestra (guida 75, conferma 78, tour 80–82) */
  --sc-z-avvisi-sotto: 9;            /* quando non c'è posto: sotto ogni finestra (la più bassa, il foglio di Flow Kanban, è a 15) */
  --sc-z-guida: 75;
  --sc-z-conferma: 78;               /* sopra pannelli, board, lavagne e guida */
}
/* 📽 il proiettore (tasto P, js/proiettore.js): una sola scala per tutta l'app, 14 → 18 px (decisione di Michele, PR 7) */
html.projector { --sc-scala: 1.3; }

/* ------------------------------------------------------------------ 2. valori di area di oggi (convergono e spariscono, PR 3–10) */
:root {
  /* Flow Scrum (città, lobby, Pannello del Trainer) */
  --sc-citta-testo-secondario: #aebbc9;
  --sc-citta-danger: #e4572e;
  --sc-citta-info: #2e86de;

  /* board in stile Jira */
  --sc-board-fondo: #1d2125;
  --sc-board-superficie: #22272b;
  --sc-board-superficie-2: #282e33;
  --sc-board-card: #2c333a;
  --sc-board-hover: #333c43;
  --sc-board-bordo: #38414a;
  --sc-board-testo: #b6c2cf;
  --sc-board-testo-forte: #dee4ea;
  --sc-board-testo-secondario: #8c9bab;
  --sc-board-blu: #579dff;
  --sc-board-su-blu: #1d2125;
  /* i colori «stato» e i segnali della board (PR 5): restano quelli di Jira, leggibili; qui col loro nome */
  --sc-board-giallo: #f5cd47;        /* bandierina, energia, «in verifica»: un avviso, non l'azione */
  --sc-board-ocra: #b38f1a;
  --sc-board-ocra-scuro: #b38600;
  --sc-board-verde-medio: #22a06b;
  --sc-board-verde-jira: #36b37e;
  --sc-board-verde: #4bce97;         /* fatto, accettata, energia prodotta */
  --sc-board-verde-chiaro: #7ee2b8;
  --sc-board-verde-scuro: #1f845a;
  --sc-board-rosso: #f87168;         /* bloccata, rifiutata, oltre il WIP */
  --sc-board-rosso-chiaro: #fd9891;
  --sc-board-blu-pieno: #1d7afc;     /* «In corso» */
  --sc-board-blu-scuro: #0c66e4;
  --sc-board-grigio: #5e6c84;
  --sc-stato-dafare-fondo: #dfe1e6;  --sc-stato-dafare-testo: #42526e;
  --sc-stato-incorso-fondo: #deebff; --sc-stato-incorso-testo: #0747a6;
  --sc-stato-fatto-fondo: #e3fcef;   --sc-stato-fatto-testo: #006644;
  --sc-su-colore: #fff;              /* testo bianco su un colore pieno */
  --sc-modulo-esterno-fondo: #fff;  /* il modulo di HubSpot nella home: ha testo scuro suo, gli serve un fondo chiaro */

  /* retrospettiva (scura dalla PR 6): i post-it sono carta, chiari col testo scuro, anche sulla lavagna scura */
  --sc-carta-testo: #172b4d;
  --sc-carta-testo-2: #42526e;       /* il piede del post-it: chi l'ha scritto, i voti */
  --sc-carta-segreta: #c9ced6;       /* il post-it di chi sta ancora scrivendo (scrittura silenziosa) */
  --sc-carta-velo: rgba(9, 30, 66, .1); /* le pillole e il ✕ sul post-it */
  --sc-carta-ombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .3);
  --sc-carta-ombra-presa: 0 12px 28px rgba(0, 0, 0, .5);
  --sc-retro-puntini: rgba(255, 255, 255, .07); /* la griglia a puntini intorno alla lavagna */
  --sc-retro-viola: #8777d9;         /* la card della regola del Debriefing guidato */
  --sc-retro-viola-tenue: rgba(135, 119, 217, .16);
  --sc-retro-viola-testo: #b8adf5;   /* il testo viola piccolo, leggibile sul viola tenue */

  /* demo */
  --sc-demo-bordo: rgba(255,255,255,.12);
  --sc-demo-vetro: rgba(16, 22, 30, .82);

  /* marchio Essere Agile (ingresso e demo: la «vetrina») */
  --sc-marchio: #ffc901;
  --sc-marchio-testo: #373935;
  --sc-marchio-testo-2: #4a4a40;
  --sc-marchio-chiaro: #ffe47a;
  --sc-marchio-scuro: #cca101;
  --sc-marchio-carta: #fff2bf;
  --sc-marchio-bianco: #ffffff;
  --sc-pallino-oro: #d7a900;
  --sc-pallino-scuro: #373a36;
  --sc-pallino-chiaro: #fce38a;
  --sc-pallino-grigio: #bfc0bf;
  --sc-sito-piede: #373a36;
  --sc-sito-ombra: 0 2px 5px rgba(55, 58, 54, .15);
  --sc-marchio-pannello: #eeeeee;
  --sc-font-marchio: "Manrope", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

/* ------------------------------------------------------------------ 3. la tavolozza di area (PR 10a)
 * I colori che i fogli di area scrivevano a mano, uno per valore, col nome della tinta (o del token di cui sono una
 * trasparenza: -aNN = NN%). Stessi valori di prima: niente cambia a vedersi. Un colore nuovo nasce qui, o meglio nel blocco 1. */
:root {
  --sc-azione-a10: rgba(242, 205, 55, 0.1);
  --sc-azione-a12: rgba(242, 205, 55, 0.12);
  --sc-azione-a14: rgba(242, 205, 55, 0.14);
  --sc-azione-a16: rgba(242, 205, 55, 0.16);
  --sc-azione-a18: rgba(242, 205, 55, 0.18);
  --sc-azione-a22: rgba(242, 205, 55, 0.22);
  --sc-azione-a25: rgba(242, 205, 55, 0.25);
  --sc-azione-a30: rgba(242, 205, 55, 0.3);
  --sc-azione-a35: rgba(242, 205, 55, 0.35);
  --sc-azione-a38: rgba(242, 205, 55, 0.38);
  --sc-azione-a55: rgba(242, 205, 55, 0.55);
  --sc-azione-a60: rgba(242, 205, 55, 0.6);
  --sc-azione-a8: rgba(242, 205, 55, 0.08);
  --sc-azione-a80: rgba(242, 205, 55, 0.8);
  --sc-azione-a9: rgba(242, 205, 55, 0.09);
  --sc-board-giallo-a10: rgba(245, 205, 71, 0.1);
  --sc-board-giallo-a12: rgba(245, 205, 71, 0.12);
  --sc-board-giallo-a14: rgba(245, 205, 71, 0.14);
  --sc-board-giallo-a25: rgba(245, 205, 71, 0.25);
  --sc-board-giallo-a28: rgba(245, 205, 71, 0.28);
  --sc-board-giallo-a30: rgba(245, 205, 71, 0.3);
  --sc-board-giallo-a35: rgba(245, 205, 71, 0.35);
  --sc-board-giallo-a8: rgba(245, 205, 71, 0.08);
  --sc-board-rosso-a12: rgba(248, 113, 104, 0.12);
  --sc-board-rosso-a15: rgba(248, 113, 104, 0.15);
  --sc-board-rosso-a18: rgba(248, 113, 104, 0.18);
  --sc-board-verde-a12: rgba(75, 206, 151, 0.12);
  --sc-board-verde-scuro-a35: rgba(31, 132, 90, 0.35);
  --sc-citta-danger-a12: rgba(228, 87, 46, 0.12);
  --sc-citta-danger-a20: rgba(228, 87, 46, 0.2);
  --sc-citta-danger-a38: rgba(228, 87, 46, 0.38);
  --sc-citta-danger-a45: rgba(228, 87, 46, 0.45);
  --sc-citta-danger-a50: rgba(228, 87, 46, 0.5);
  --sc-citta-info-a12: rgba(46, 134, 222, 0.12);
  --sc-citta-info-a20: rgba(46, 134, 222, 0.2);
  --sc-citta-info-a22: rgba(46, 134, 222, 0.22);
  --sc-citta-info-a35: rgba(46, 134, 222, 0.35);
  --sc-danger-a22: rgba(255, 107, 90, 0.22);
  --sc-info-a12: rgba(87, 157, 255, 0.12);
  --sc-info-a16: rgba(87, 157, 255, 0.16);
  --sc-info-a18: rgba(87, 157, 255, 0.18);
  --sc-info-a22: rgba(87, 157, 255, 0.22);
  --sc-info-a30: rgba(87, 157, 255, 0.3);
  --sc-info-a45: rgba(87, 157, 255, 0.45);
  --sc-info-a7: rgba(87, 157, 255, 0.07);
  --sc-marchio-testo-a12: rgba(55, 57, 53, 0.12);
  --sc-marchio-testo-a25: rgba(55, 57, 53, 0.25);
  --sc-marchio-testo-a35: rgba(55, 57, 53, 0.35);
  --sc-marchio-testo-a40: rgba(55, 57, 53, 0.4);
  --sc-marchio-testo-a8: rgba(55, 57, 53, 0.08);
  --sc-ok-a18: rgba(32, 191, 107, 0.18);
  --sc-ok-a20: rgba(32, 191, 107, 0.2);
  --sc-ok-a22: rgba(32, 191, 107, 0.22);
  --sc-ok-a25: rgba(32, 191, 107, 0.25);
  --sc-ok-a30: rgba(32, 191, 107, 0.3);
  --sc-su-colore-a10: rgba(255, 255, 255, 0.1);
  --sc-su-colore-a11: rgba(255, 255, 255, 0.11);
  --sc-su-colore-a15: rgba(255, 255, 255, 0.15);
  --sc-su-colore-a16: rgba(255, 255, 255, 0.16);
  --sc-su-colore-a18: rgba(255, 255, 255, 0.18);
  --sc-su-colore-a20: rgba(255, 255, 255, 0.2);
  --sc-su-colore-a22: rgba(255, 255, 255, 0.22);
  --sc-su-colore-a25: rgba(255, 255, 255, 0.25);
  --sc-su-colore-a3: rgba(255, 255, 255, 0.03);
  --sc-su-colore-a30: rgba(255, 255, 255, 0.3);
  --sc-su-colore-a4: rgba(255, 255, 255, 0.04);
  --sc-su-colore-a45: rgba(255, 255, 255, 0.45);
  --sc-su-colore-a5: rgba(255, 255, 255, 0.05);
  --sc-su-colore-a50: rgba(255, 255, 255, 0.5);
  --sc-su-colore-a55: rgba(255, 255, 255, 0.55);
  --sc-su-colore-a60: rgba(255, 255, 255, 0.6);
  --sc-su-colore-a8: rgba(255, 255, 255, 0.08);
  --sc-su-colore-a88: rgba(255, 255, 255, 0.88);
  --sc-tav-arancio: #ffb02e;
  --sc-tav-arancio-2: #ffb86b;
  --sc-tav-arancio-3: #fe8a18;
  --sc-tav-arancio-4: #c2571e;
  --sc-tav-arancio-5: #ff9f43;
  --sc-tav-arancio-a60: rgba(255, 159, 67, 0.6);
  --sc-tav-arancio-chiaro: #ffe2cc;
  --sc-tav-arancio-chiaro-2: #ffc2a8;
  --sc-tav-arancio-chiaro-3: #ffb37a;
  --sc-tav-arancio-scuro: #3a1d10;
  --sc-tav-arancio-scuro-a92: rgba(120, 80, 10, 0.92);
  --sc-tav-bianco: #f4f4f4;
  --sc-tav-blu: #4b5560;
  --sc-tav-blu-chiaro: #8cc4ff;
  --sc-tav-blu-chiaro-2: #c9d3de;
  --sc-tav-blu-chiaro-3: #8fbcff;
  --sc-tav-blu-chiaro-4: #d6e8ff;
  --sc-tav-blu-chiaro-5: #a9d4ff;
  --sc-tav-blu-chiaro-6: #c3cdd8;
  --sc-tav-blu-chiaro-7: #a9d0ff;
  --sc-tav-blu-chiaro-8: #c3e0ff;
  --sc-tav-blu-chiaro-a12: rgba(143, 216, 255, 0.12);
  --sc-tav-blu-chiaro-a25: rgba(143, 216, 255, 0.25);
  --sc-tav-blu-chiaro-a40: rgba(143, 216, 255, 0.4);
  --sc-tav-blu-scuro: #1c3a66;
  --sc-tav-blu-scuro-2: #10233a;
  --sc-tav-blu-scuro-a12: rgba(9, 30, 66, 0.12);
  --sc-tav-giallo: #8a7a2e;
  --sc-tav-giallo-2: #f5d867;
  --sc-tav-giallo-3: #b8901a;
  --sc-tav-giallo-4: #ffd93d;
  --sc-tav-giallo-5: #ffcf6b;
  --sc-tav-giallo-a10: rgba(255, 207, 107, 0.1);
  --sc-tav-giallo-a12: rgba(255, 217, 61, 0.12);
  --sc-tav-giallo-a12-2: rgba(255, 207, 107, 0.12);
  --sc-tav-giallo-chiaro: #ffe27a;
  --sc-tav-giallo-chiaro-2: #fff8d6;
  --sc-tav-giallo-chiaro-3: #d8cf9a;
  --sc-tav-giallo-chiaro-4: #ffe8a3;
  --sc-tav-giallo-chiaro-5: #ffe680;
  --sc-tav-giallo-chiaro-6: #fffbe6;
  --sc-tav-giallo-scuro: #2a2410;
  --sc-tav-giallo-scuro-2: #5a4a12;
  --sc-tav-grigio: #454f59;
  --sc-tav-grigio-chiaro: #d6dee7;
  --sc-tav-grigio-chiaro-10: #c9d2dc;
  --sc-tav-grigio-chiaro-2: #dbe2ea;
  --sc-tav-grigio-chiaro-3: #e3e8ee;
  --sc-tav-grigio-chiaro-4: #dfe4ea;
  --sc-tav-grigio-chiaro-5: #dfe6ec;
  --sc-tav-grigio-chiaro-6: #c9d1da;
  --sc-tav-grigio-chiaro-7: #dfe6ee;
  --sc-tav-grigio-chiaro-8: #cfd8e2;
  --sc-tav-grigio-chiaro-9: #cdd6e0;
  --sc-tav-grigio-scuro: #1d2430;
  --sc-tav-grigio-scuro-10: #1c2430;
  --sc-tav-grigio-scuro-11: #1d2a22;
  --sc-tav-grigio-scuro-2: #121a23;
  --sc-tav-grigio-scuro-3: #1b232d;
  --sc-tav-grigio-scuro-4: #16202a;
  --sc-tav-grigio-scuro-5: #3a3a3a;
  --sc-tav-grigio-scuro-6: #121921;
  --sc-tav-grigio-scuro-7: #121820;
  --sc-tav-grigio-scuro-8: #18202a;
  --sc-tav-grigio-scuro-9: #161d26;
  --sc-tav-grigio-scuro-a88: rgba(14, 20, 28, 0.88);
  --sc-tav-grigio-scuro-a88-2: rgba(16, 22, 30, 0.88);
  --sc-tav-grigio-scuro-a92: rgba(32, 40, 52, 0.92);
  --sc-tav-nero: #111111;
  --sc-tav-nero-2: #0d1218;
  --sc-tav-nero-3: #000000;
  --sc-tav-nero-4: #0b1016;
  --sc-tav-nero-a14: rgba(0, 0, 0, 0.14);
  --sc-tav-nero-a18: rgba(0, 0, 0, 0.18);
  --sc-tav-nero-a20: rgba(0, 0, 0, 0.2);
  --sc-tav-nero-a25: rgba(0, 0, 0, 0.25);
  --sc-tav-nero-a28: rgba(0, 0, 0, 0.28);
  --sc-tav-nero-a30: rgba(0, 0, 0, 0.3);
  --sc-tav-nero-a35: rgba(0, 0, 0, 0.35);
  --sc-tav-nero-a40: rgba(0, 0, 0, 0.4);
  --sc-tav-nero-a42: rgba(0, 0, 0, 0.42);
  --sc-tav-nero-a45: rgba(0, 0, 0, 0.45);
  --sc-tav-nero-a50: rgba(0, 0, 0, 0.5);
  --sc-tav-nero-a55: rgba(5, 8, 12, 0.55);
  --sc-tav-nero-a55-2: rgba(10, 14, 20, 0.55);
  --sc-tav-nero-a55-3: rgba(0, 0, 0, 0.55);
  --sc-tav-nero-a55-4: rgba(6, 10, 14, 0.55);
  --sc-tav-nero-a58: rgba(8, 12, 18, 0.58);
  --sc-tav-nero-a60: rgba(0, 0, 0, 0.6);
  --sc-tav-nero-a60-2: rgba(3, 4, 4, 0.6);
  --sc-tav-nero-a62: rgba(4, 8, 12, 0.62);
  --sc-tav-nero-a65: rgba(0, 0, 0, 0.65);
  --sc-tav-nero-a70: rgba(5, 10, 16, 0.7);
  --sc-tav-nero-a72: rgba(12, 17, 24, 0.72);
  --sc-tav-nero-a72-2: rgba(10, 14, 20, 0.72);
  --sc-tav-nero-a80: rgba(0, 0, 0, 0.8);
  --sc-tav-nero-a82: rgba(11, 16, 22, 0.82);
  --sc-tav-nero-a82-2: rgba(13, 18, 24, 0.82);
  --sc-tav-nero-a86: rgba(5, 8, 12, 0.86);
  --sc-tav-nero-a86-2: rgba(8, 12, 18, 0.86);
  --sc-tav-nero-a90: rgba(11, 16, 22, 0.9);
  --sc-tav-nero-a90-2: rgba(12, 17, 24, 0.9);
  --sc-tav-rosso: #c9372c;
  --sc-tav-rosso-2: #ff4d3d;
  --sc-tav-rosso-a18: rgba(201, 55, 44, 0.18);
  --sc-tav-rosso-a20: rgba(201, 55, 44, 0.2);
  --sc-tav-rosso-a25: rgba(201, 55, 44, 0.25);
  --sc-tav-rosso-a35: rgba(201, 55, 44, 0.35);
  --sc-tav-rosso-a50: rgba(201, 55, 44, 0.5);
  --sc-tav-rosso-a85: rgba(120, 40, 34, 0.85);
  --sc-tav-rosso-a92: rgba(160, 26, 14, 0.92);
  --sc-tav-rosso-chiaro: #ff8f73;
  --sc-tav-rosso-chiaro-2: #ffc9c0;
  --sc-tav-rosso-chiaro-3: #ffb3a8;
  --sc-tav-rosso-chiaro-4: #ffb3c4;
  --sc-tav-rosso-chiaro-5: #ff8a73;
  --sc-tav-rosso-scuro: #3a1714;
  --sc-tav-rosso-scuro-2: #7a1d00;
  --sc-tav-rosso-scuro-3: #7a1f12;
  --sc-tav-rosso-scuro-a92: rgba(120, 16, 12, 0.92);
  --sc-tav-verde: #6ff0a8;
  --sc-tav-verde-chiaro: #9be7b8;
  --sc-tav-verde-chiaro-2: #9fe6b4;
  --sc-tav-verde-scuro: #12351f;
  --sc-tav-verde-scuro-2: #08210f;
  --sc-tav-viola: #a55eea;
  --sc-tav-viola-a22: rgba(165, 94, 234, 0.22);
  --sc-tav-viola-a25: rgba(165, 94, 234, 0.25);
  --sc-tav-viola-chiaro: #d3b0ff;
  /* PR 10b: i colori che stavano negli stili in linea dei template */
  --sc-tav-grigio-altri: #333344;
  --sc-tav-blu-fatti: #4c9aff;
  --sc-tav-rosso-avatar: #ff6b6b;
  --sc-tav-grigio-scope: #c1c7d0;
}