/*
  I colori e i contorni degli avatar degli agenti sono quelli del prodotto (`avatar.ts`, `CSS_AVATAR`). Questo file lo scrive
  `sito/costruisci.mjs`: non si tocca a mano. Le regole per i temi scuri di VS Code non ci sono: nel sito le tinte restano le stesse.
  La misura di un avatar la dà la scena (`--avatar-px`).
*/

.pan.avatar { width: var(--avatar-px, 24px); height: var(--avatar-px, 24px); --avatar-antracite: #5a6282; --avatar-baffi: #3d2b22; --avatar-lente: #ffffff; }
.pan.avatar[data-colore="pan"] { --pan-carta: #fbfaf7; --avatar-accento: #7a3fd0; --avatar-identita: var(--vscode-button-background, #7a3fd0); --avatar-alone-1: #c9316f; --avatar-alone-2: #7a3fd0; --avatar-alone-3: #1f7fc0; --avatar-alone-4: #1f9b62; --avatar-alone-5: #b8801a; }
.pan.avatar[data-colore="corallo"] { --pan-carta: #fec9c1; --avatar-accento: #bd4238; --avatar-identita: #bd4238; --avatar-alone-1: #c0423f; --avatar-alone-2: #bd4238; --avatar-alone-3: #b8532a; --avatar-alone-4: #bd4238; --avatar-alone-5: #c0423f; }
.pan.avatar[data-colore="albicocca"] { --pan-carta: #ffd5b2; --avatar-accento: #a45e02; --avatar-identita: #a45e02; --avatar-alone-1: #b5522a; --avatar-alone-2: #a45e02; --avatar-alone-3: #8f6a00; --avatar-alone-4: #a45e02; --avatar-alone-5: #b5522a; }
.pan.avatar[data-colore="limone"] { --pan-carta: #ffe97e; --avatar-accento: #867406; --avatar-identita: #867406; --avatar-alone-1: #a06c00; --avatar-alone-2: #867406; --avatar-alone-3: #6f8a00; --avatar-alone-4: #867406; --avatar-alone-5: #a06c00; }
.pan.avatar[data-colore="menta"] { --pan-carta: #8ff3bf; --avatar-accento: #028758; --avatar-identita: #028758; --avatar-alone-1: #4a8a1f; --avatar-alone-2: #028758; --avatar-alone-3: #00837a; --avatar-alone-4: #028758; --avatar-alone-5: #4a8a1f; }
.pan.avatar[data-colore="cielo"] { --pan-carta: #ace0fe; --avatar-accento: #037bab; --avatar-identita: #037bab; --avatar-alone-1: #008a9a; --avatar-alone-2: #037bab; --avatar-alone-3: #3a68c4; --avatar-alone-4: #037bab; --avatar-alone-5: #008a9a; }
.pan.avatar[data-colore="lavanda"] { --pan-carta: #dccffe; --avatar-accento: #7e57c1; --avatar-identita: #7e57c1; --avatar-alone-1: #5a5cc4; --avatar-alone-2: #7e57c1; --avatar-alone-3: #a64fad; --avatar-alone-4: #7e57c1; --avatar-alone-5: #5a5cc4; }
.pan.avatar[data-colore="rosa"] { --pan-carta: #fec4de; --avatar-accento: #b2417f; --avatar-identita: #b2417f; --avatar-alone-1: #a84bae; --avatar-alone-2: #b2417f; --avatar-alone-3: #c0404b; --avatar-alone-4: #b2417f; --avatar-alone-5: #a84bae; }
.pan.avatar[data-colore="sabbia"] { --pan-carta: #ecdcbd; --avatar-accento: #8a6d2c; --avatar-identita: #8a6d2c; --avatar-alone-1: #8b5e3c; --avatar-alone-2: #8a6d2c; --avatar-alone-3: #7a7430; --avatar-alone-4: #8a6d2c; --avatar-alone-5: #8b5e3c; }
.pan.avatar[data-colore="ardesia"] { --pan-carta: #c4d2e5; --avatar-accento: #4c73a5; --avatar-identita: #4c73a5; --avatar-alone-1: #4a6a9e; --avatar-alone-2: #4c73a5; --avatar-alone-3: #587aa3; --avatar-alone-4: #4c73a5; --avatar-alone-5: #4a6a9e; }
.avatar .av-o { stroke: var(--pan-inchiostro); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.avatar .av-acc { fill: var(--avatar-accento); }
.avatar .av-acc.av-scuro { fill: color-mix(in srgb, var(--avatar-accento) 72%, var(--pan-inchiostro)); }
.avatar .av-carta { fill: var(--pan-carta); }
.avatar .av-antracite { fill: var(--avatar-antracite); }
.avatar .av-linea { fill: none; stroke: var(--pan-inchiostro); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
.avatar .av-linea-forte { fill: none; stroke: var(--pan-inchiostro); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.avatar .av-linea-acc { fill: none; stroke: var(--avatar-accento); stroke-width: 2; stroke-linecap: round; }
.avatar .av-linea-carta { fill: none; stroke: var(--pan-carta); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.avatar .av-lente { fill: var(--avatar-lente); fill-opacity: 0.2; stroke: var(--pan-inchiostro); stroke-width: 2.6; }
.avatar .av-luce { fill: none; stroke: var(--avatar-lente); stroke-width: 1.8; stroke-linecap: round; opacity: 0.85; }
.avatar .av-archetto { fill: none; stroke: var(--pan-inchiostro); stroke-width: 6.4; stroke-linecap: round; }
.avatar .av-archetto-acc { fill: none; stroke: var(--avatar-accento); stroke-width: 3.4; stroke-linecap: round; }
.avatar .av-baffi { fill: var(--avatar-baffi); stroke: var(--pan-inchiostro); stroke-width: 1.4; stroke-linejoin: round; }
.avatar .av-corpo-piatto { fill: var(--pan-carta); stroke: var(--avatar-alone-2); stroke-width: 4.6; stroke-linejoin: round; }
.avatar.avatar-minima .av-corpo-piatto, .avatar.avatar-piccola .av-corpo-piatto { stroke-width: 5.6; }
/* In un elenco niente si muove: le facce piatte non sbattono le palpebre (col foglio di Pan lo farebbero tutte insieme). */
.pan.avatar-minima .pan-occhio, .pan.avatar-piccola .pan-occhio, .pan.avatar-scelta .pan-occhio { animation: none; }

.avatar .s1 { stop-color: var(--avatar-alone-1); }
.avatar .s2 { stop-color: var(--avatar-alone-2); }
.avatar .s3 { stop-color: var(--avatar-alone-3); }
.avatar .s4 { stop-color: var(--avatar-alone-4); }
.avatar .s5 { stop-color: var(--avatar-alone-5); }