Rifinisce l'interfaccia su safe area, materiali, tipografia e accessibilità.

Nessun cambio di funzionalità: solo resa, accessibilità e correzioni al layout
su iPhone.

- Aggiunge `viewport-fit=cover`: senza, su iOS `env(safe-area-inset-*)` valeva 0
  e il margine per la barra gesture già presente nella bottom nav non aveva
  effetto. Aggiunge il margine superiore su hero, PageHeader e header dello
  scout, che in modalità standalone finivano sotto il notch.
- Attiva il tema scuro sulla preferenza di sistema e ne riscrive i valori:
  l'accento resta il rosso del brand (prima diventava grigio-blu) e i token
  semantici che mancavano ora ci sono. `theme-color` ha una tinta per tema.
- Sposta il feedback dal rilascio alla pressione su Button, bottom nav e comandi
  principali; aggiunge l'anello di focus da tastiera in `@layer base`, che
  mancava su tutti i bottoni scritti a mano fuori da components/ui/.
- Rende la bottom nav una superficie traslucida con sfumatura di scorrimento al
  posto della riga netta, alleggerisce il velo dei drawer e sostituisce l'alone
  rosso delle ombre con ombre neutre.
- Introduce una scala tipografica in rem con crenatura e interlinea per taglia,
  al posto dei 109 `text-[Npx]` fissi che non scalavano con l'impostazione di
  testo del sistema.
- Porta a 44px le aree di tocco dei comandi piccoli, mostra uno scheletro di
  pagina al posto della schermata bianca in home e profilo, conserva le
  dissolvenze con movimento ridotto e aggiunge il supporto a
  `prefers-reduced-transparency` e `prefers-contrast`.
- Anima l'apertura delle sezioni a tendina con Radix Collapsible, già fra le
  dipendenze, al posto di un montaggio secco.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/crapp/EventoCard.tsx

@@ -63,7 +63,7 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-3xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -77,7 +77,7 @@ export function EventoCard({
         <div className="min-w-0">
           <span
             className={cn(
-              "inline-block rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide",
+              "inline-block rounded-full px-2.5 py-0.5 text-3xs font-bold uppercase tracking-wide",
               tipo.className,
             )}
           >
@@ -87,7 +87,7 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-3xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -98,9 +98,9 @@ export function EventoCard({
           <Link
             to={linkTo.to}
             params={linkTo.params}
-            className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-[10px] font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
+            className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-3xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
           >
-            {linkTo.label} <ArrowRight className="h-3 w-3" />
+            {linkTo.label} <ArrowRight className="h-3.5 w-3.5" />
           </Link>
         </div>
       )}
@@ -138,7 +138,7 @@ export function EventoCard({
                   })
                 }
                 className={cn(
-                  "rounded-full border border-border px-2.5 py-1.5 text-[11px] font-semibold transition-all active:scale-95",
+                  "rounded-full border border-border px-2.5 py-1.5 text-2xs font-semibold transition-all active:scale-95",
                   attivo
                     ? cn(meta.className, "border-transparent shadow-card")
                     : "bg-background text-muted-foreground",