:root{
  --site-pink:#E51156;
  --site-pink-light:#FF5D96;
  --site-pink-deep:#7A0836;
  --ink:#000000;
  --paper:#FAFAF9;
  --surface:#FFFFFF;
  --text:#0B0B10;
  --pink-text:#7A0836;
  --slate:#53525C;
  --slate-soft:#8A8890;
  --border:#E7E4E1;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Cascadia Code',Consolas,monospace;
}
:root[data-theme="dark"]{
  --paper:#131019;
  --surface:#1C1824;
  --text:#F1EFF2;
  --slate:#ACA5B4;
  --slate-soft:#8B8594;
  --border:#322C39;
  --pink-text:#FF5D96;
}
.icon{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-0.125em}
/* Link senza classe/colore proprio (es. celle di tabella nelle dashboard): in tema
   scuro il blu di default del browser non e' leggibile sullo sfondo scuro. :where()
   ha specificita' zero apposta, cosi' un qualunque colore gia' scelto altrove
   (es. .msg-bubble a{color:var(--accent)} in chat) continua a vincere. */
:where([data-theme="dark"]) a{color:#fff}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video{max-width:100%;height:auto}
/* Telefono e tablet: sotto i 16px iOS ingrandisce la pagina quando si tocca un campo.
   !important perche' molte pagine fissano il font dei campi con selettori piu' specifici. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}
}