/* Tre proposte grafiche «cuoio» (26 ottobre 2026), da confrontare finché il coach non sceglie: rame, oliva, platino.
   La scelta sta su <html data-tema="…"> (public/js/tema.js). Si carica dopo app.css e ne ridefinisce solo i colori. */
html[data-tema="rame"]{--sfondo:#151211;--accento:#DBAA78;--testo:#F3EEE7;--attenuato:#B7AAA0;--ground:#151211;--acid:#DBAA78;--ink:#F3EEE7;--bone:#F3EEE7;--muted:#B7AAA0;--faint:#7E746C;--on-acid:#151211;--surface:color-mix(in srgb,#151211 87%,#DBAA78);--surface-2:color-mix(in srgb,#151211 80%,#DBAA78);--line:color-mix(in srgb,#151211 64%,#B7AAA0)}
html[data-tema="oliva"]{--sfondo:#151612;--accento:#C5D98B;--testo:#F1F0E7;--attenuato:#AEB3A1;--ground:#151612;--acid:#C5D98B;--ink:#F1F0E7;--bone:#F1F0E7;--muted:#AEB3A1;--faint:#767B6E;--on-acid:#151612;--surface:color-mix(in srgb,#151612 87%,#C5D98B);--surface-2:color-mix(in srgb,#151612 80%,#C5D98B);--line:color-mix(in srgb,#151612 64%,#AEB3A1)}
html[data-tema="platino"]{--sfondo:#131415;--accento:#CFD5D2;--testo:#F2F3EF;--attenuato:#A8AEAB;--ground:#131415;--acid:#CFD5D2;--ink:#F2F3EF;--bone:#F2F3EF;--muted:#A8AEAB;--faint:#737875;--on-acid:#131415;--surface:color-mix(in srgb,#131415 87%,#CFD5D2);--surface-2:color-mix(in srgb,#131415 80%,#CFD5D2);--line:color-mix(in srgb,#131415 64%,#A8AEAB)}

/* Materiale: cuoio scuro dietro la schermata di benvenuto, controlli coerenti con l'accento. */
html[data-tema]{scrollbar-color:var(--line) var(--ground);scrollbar-width:thin}
html[data-tema] body{caret-color:var(--acid)}
html[data-tema] ::selection{background:var(--acid);color:var(--ground)}
html[data-tema] .benv{background-color:var(--ground);background-image:linear-gradient(color-mix(in srgb,var(--ground) 85%,transparent),color-mix(in srgb,var(--ground) 85%,transparent)),url('/img/cuoio.webp');background-size:auto,650px;background-position:center}
html[data-tema] .benv-brand{gap:8px}
html[data-tema] .benv-logo{width:auto;height:min(40vw,170px);max-width:200px;aspect-ratio:auto;filter:drop-shadow(0 4px 8px #0005)}
html[data-tema] .nome-app{font-family:var(--f-display);font-size:28px;font-weight:800;letter-spacing:.055em;color:var(--ink);line-height:1;text-transform:uppercase}
html[data-tema] .campo{background:color-mix(in srgb,var(--ground) 94%,var(--acid));border-color:var(--line);color:var(--ink)}
html[data-tema] .campo::placeholder{color:var(--muted);opacity:1}
html[data-tema] .spunta input{accent-color:var(--acid)}
html[data-tema] .btn.primary{box-shadow:0 5px 16px #0002;transition:background .18s}
html[data-tema] a{text-underline-offset:3px;text-decoration-thickness:1px}

/* Selettore delle tre proposte (anteprima per il coach): tre pastiglie con il colore d'accento di ciascuna. */
.temi{display:flex;gap:8px;flex-wrap:wrap}
.tema-b{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:600}
.tema-b i{width:14px;height:14px;border-radius:50%;background:var(--c);display:inline-block}
.tema-b[aria-pressed="true"]{border-color:var(--acid);box-shadow:inset 0 0 0 1px var(--acid)}