/* =============================================================================
   tokens.css - DIZIONARIO UNICO dei colori, delle superfici e delle metriche
   della PWA AppleNearoo (V7 di docs/decisioni-apple-nearoo.md).
   -----------------------------------------------------------------------------
   REGOLA: in questo progetto un colore esadecimale o `rgba(...)` di superficie
   si scrive SOLO qui. I fogli di stile e il JavaScript usano le variabili
   (`var(--nome)`), mai il valore. La guardia `checks/test-apple-pwa.mjs`
   (sezione palette) rifiuta esadecimali fuori da questo file: un colore nuovo
   e' una decisione, non un refuso.

   FONTI (dai file reali dell'app, non a occhio):
     - gradiente di sfondo e glow: src/components/app-background.tsx
     - superfici/testo/accenti:  src/constants/electric-theme.ts
     - colori di mappa e marker: src/lib/map-config.ts (MAP_PAINT)
     - tinta delle notifiche:   src/lib/notifications.ts (NOTIFICATION_COLOR)
   ============================================================================= */

:root {
  /* --- Sfondo "notte indaco" (app-background.tsx) -------------------------- */
  --bg-stop-basso: #170c2c;
  --bg-stop-centro: #28123d;
  --bg-stop-transizione: #1a1030;
  --bg-stop-alto: #110c24;
  /* Base piatta del primo frame: la stessa che usa il tema della PWA
     (`theme_color`/`background_color` del manifest). */
  --bg-base: #110c24;
  /* Glow d'atmosfera (app-background.tsx: GLOW_MAGENTA_COLOR/GLOW_CYAN_COLOR
     con le loro opacita'). */
  --glow-magenta: rgba(168, 34, 111, 0.18);
  --glow-ciano: rgba(0, 242, 254, 0.1);

  /* --- Superfici (electric-theme.ts) --------------------------------------- */
  --card-bg: rgba(255, 255, 255, 0.1);
  --card-border: rgba(255, 255, 255, 0.2);
  --card-border-soft: rgba(255, 255, 255, 0.14);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.16);
  /* Fondo OPACO della lista aperta di una tendina (`<option>`): il browser non
     eredita la superficie traslucida del campo, e senza questo token il testo
     bianco finiva su un fondo chiaro di sistema (illeggibile). */
  --input-opzione-bg: #1a1030;
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-border: rgba(255, 255, 255, 0.18);
  --chip-selected-bg: rgba(124, 58, 237, 0.28);
  --chip-selected-border: rgba(167, 139, 250, 0.7);
  --tab-active-bg: rgba(139, 92, 246, 0.24);
  --warning-bg: rgba(244, 63, 94, 0.12);
  --warning-border: rgba(244, 63, 94, 0.45);

  /* --- Testo --------------------------------------------------------------- */
  --testo: #ffffff;
  --testo-secondario: rgba(255, 255, 255, 0.82);
  --testo-attenuato: rgba(255, 255, 255, 0.66);
  --testo-errore: #ffb4b4;

  /* --- Accenti ------------------------------------------------------------- */
  --accento-viola: #7c3aed;
  --accento-magenta: #ec4899;
  --accento-ciano: #9be8ff;
  --icona-chiara: #c4b5fd;
  --icona-spenta: #8f84b3;
  --stato-attivo: #f9a8d4;
  --stato-attivo-alone: rgba(249, 168, 212, 0.22);
  /* Bordo della card protagonista quando il Radar e' VISIBILE
     (STATUS_ACTIVE_BORDER di electric-theme.ts). */
  --stato-attivo-bordo: rgba(249, 168, 212, 0.45);

  /* --- Icona del genere nella lista Dating (04/11/2026) --------------------
     Il genere si legge a colpo d'occhio, senza tradurre nulla:
       uomo  -> azzurro brillante
       donna -> rosa intenso (lo STESSO valore di `--rc-rosa`, il rosa del
                design system: qui si ripete solo perche' la capsula del genere
                non deve dipendere dal tema di una singola schermata)
       altro -> NESSUN token: resta il neutro del vetro (`--rc-testo-tenue`),
                perche' i profili registrati prima dell'obbligo del sesso non
                devono ricevere un colore inventato.
     Le regole `.dating__genere--*` di app.css leggono SOLO questi token: un
     colore nuovo si scrive qui, mai nel foglio di stile (guardia H). */
  --genere-uomo: #38bdf8;
  --genere-uomo-sfondo: rgba(56, 189, 248, 0.16);
  --genere-uomo-bordo: rgba(56, 189, 248, 0.5);
  --genere-donna: #f472b6;
  --genere-donna-sfondo: rgba(244, 114, 182, 0.16);
  --genere-donna-bordo: rgba(244, 114, 182, 0.5);

  /* --- Home / Dashboard (Passo 3 della parita', guscio v13) ----------------
     Valori letti dai componenti dell'app:
       - ICON_HALO_BACKGROUND            -> --icona-tonda-sfondo
       - ICON_TILE_TONES (cyan/violet/pink) -> --tinta-*-sfondo / --tinta-*-bordo
       - STATUS_ROW_BG / STATUS_ROW_BORDER -> --stato-riga-sfondo / -bordo
       - RING_OUTER_BORDER / RING_INNER_BORDER / CORE_BORDER di radar-avatar.tsx
                                          -> --avatar-anello-* / --avatar-core-bordo
     L'iniziale usa `--marker-iniziale` (#A78BFA, lo stesso INITIAL_COLOR
     dell'avatar) e il core scuro `--avatar-sfondo` (#13161D): due token che
     esistevano gia' per i marker della mappa. */
  --icona-tonda-sfondo: rgba(124, 58, 237, 0.18);
  --tinta-ciano-sfondo: rgba(155, 232, 255, 0.16);
  --tinta-ciano-bordo: rgba(155, 232, 255, 0.42);
  --tinta-viola-sfondo: rgba(124, 58, 237, 0.22);
  --tinta-viola-bordo: rgba(167, 139, 250, 0.45);
  --tinta-rosa-sfondo: rgba(249, 168, 212, 0.16);
  --tinta-rosa-bordo: rgba(249, 168, 212, 0.42);
  --stato-riga-sfondo: rgba(15, 8, 32, 0.45);
  --stato-riga-bordo: rgba(196, 181, 253, 0.22);
  --avatar-anello-esterno: rgba(124, 58, 237, 0.35);
  --avatar-anello-interno: rgba(167, 139, 250, 0.55);
  --avatar-core-bordo: rgba(124, 58, 237, 0.7);

  /* --- Scope del radar nella card protagonista (radar-scope.tsx) -----------
     Anelli a 0.45/0.72/1 del raggio (RING_COLORS), assi (AXIS_COLOR), coda
     dello sweep (SWEEP_COLORS: ciano trasparente -> ciano 0.32), centro
     (CENTER_BADGE_BACKGROUND / CENTER_BADGE_BORDER / CENTER_CORE_BORDER) e
     alone dei pallini decorativi (DOT_HALO_BACKGROUND). */
  --radar-anello-interno: rgba(124, 58, 237, 0.38);
  --radar-anello-medio: rgba(167, 139, 250, 0.22);
  --radar-anello-esterno: rgba(167, 139, 250, 0.3);
  --radar-asse: rgba(167, 139, 250, 0.16);
  --radar-sweep-coda: rgba(155, 232, 255, 0);
  --radar-sweep-punta: rgba(155, 232, 255, 0.32);
  --radar-centro-sfondo: rgba(124, 58, 237, 0.28);
  --radar-centro-bordo: rgba(167, 139, 250, 0.55);

  /* --- Schermata Radar (Passo 4 della parita', guscio v14) ------------------
     Valori letti da `src/app/(app)/(tabs)/radar.tsx` dell'APK:
       - userAvatarFallback  -> --radar-avatar-ripiego (l'iniziale e' bianca)
       - distanceBadge       -> --radar-distanza-sfondo / -bordo (testo ACCENT_CYAN)
       - refreshButton       -> --radar-aggiorna-sfondo / -bordo
       - outlineButton       -> --radar-comando-bordo
     La superficie delle tessere e della card dei controlli NON ha token nuovi:
     sono CARD_BACKGROUND / CARD_BORDER, cioe' --card-bg / --card-border. */
  --radar-avatar-ripiego: rgba(124, 58, 237, 0.35);
  --radar-distanza-sfondo: rgba(34, 211, 238, 0.14);
  --radar-distanza-bordo: rgba(34, 211, 238, 0.4);
  --radar-aggiorna-sfondo: rgba(255, 255, 255, 0.06);
  --radar-aggiorna-bordo: rgba(255, 255, 255, 0.25);
  --radar-comando-bordo: rgba(255, 255, 255, 0.3);
  /* Posizione dei marker reali nello scope (percentuali): il default e' il
     centro, js/radar-controlli.js le riscrive con bearing e distanza. */
  --marker-x: 50%;
  --marker-y: 50%;

  /* --- Accesso (src/app/(auth)/welcome.tsx) ---------------------------------
     Valori letti dal componente: sono i soli colori della schermata di benvenuto
     che non esistevano gia' nel tema (TEST_SUBTITLE, LABEL_UNCHECKED, i bordi
     delle caselle, i tre blob del logo, lo scudo dei consensi). Il gradiente del
     CTA (viola -> magenta) e i due link sono `--accento-viola`,
     `--accento-magenta` e `--accento-ciano`, cioe' gli stessi del tema. */
  --accesso-versione: #b9c4d4;
  --accesso-testo-sottotitolo: rgba(255, 255, 255, 0.85);
  --accesso-testo-etichetta: rgba(255, 255, 255, 0.72);
  --accesso-bordo-casella: rgba(255, 255, 255, 0.55);
  --accesso-bordo-casella-spunta: rgba(255, 255, 255, 0.85);
  /* Aura dell'hero: heroAura (400x400, tre stop, l'ultimo trasparente). */
  --accesso-alone-viola: rgba(168, 85, 247, 0.22);
  --accesso-alone-rosa: rgba(244, 114, 182, 0.12);
  --accesso-alone-fine: rgba(168, 85, 247, 0);
  /* Blob del logo (LOGO_BLOBS: c1 -> c2, sfumatura a trasparenza). */
  --accesso-blob-viola-a: #7c3aed;
  --accesso-blob-viola-b: #a855f7;
  --accesso-blob-rosa-a: #ec4899;
  --accesso-blob-rosa-b: #f472b6;
  --accesso-blob-ciano-a: #22d3ee;
  --accesso-blob-ciano-b: #67e8f9;
  /* Badge delle tre card (FEATURES): ciano, rosa, giallo. Il velo e il bordo
     sono gli stessi colori mescolati col trasparente (18% / 40%), come
     `${accent}2E` e `${accent}66` nel componente. */
  --accesso-badge-ciano: #22d3ee;
  --accesso-badge-rosa: #f472b6;
  --accesso-badge-giallo: #fbbf24;
  /* Scudo dei consensi (consentShield). */
  --accesso-scudo-sfondo: rgba(236, 72, 153, 0.22);
  --accesso-scudo-bordo: rgba(236, 72, 153, 0.5);
  /* Badge "G" del pulsante Google (google-sign-in-button.tsx). */
  --accesso-google-g: #4285f4;
  --accesso-google-bordo: #e0e0e0;

  /* --- Foglio dei Termini (terms-consent-modal.tsx) ------------------------- */
  --foglio-sfondo: #000000;
  --foglio-bordo: #1f2124;
  --foglio-testo: #d8dce1;
  --foglio-testo-tenue: #b0b4ba;
  /* CTA del foglio: `Brand.primary` del tema (blu Nearoo), non il gradiente
     della Welcome (li' e' il componente del pulsante Google a imporlo). */
  --azione-primaria: #208aef;
  --azione-primaria-chiara: #3c9ffe;

  /* Alone del semaforo "tutto a posto" nel guscio (verde di `--marker-luogo`,
     stessa famiglia, opacita' bassa: e' uno sfondo, non un contenuto). */
  --semaforo-ok-alone: rgba(76, 212, 113, 0.16);
  /* Velo dei fogli modali (`::backdrop`): nero trasparente, non un colore di
     marca (deve spegnere, non colorare). */
  --velo-scuro: rgba(0, 0, 0, 0.55);

  /* --- Marker delle mappe (MAP_PAINT di map-config.ts) --------------------- */
  --mappa-terra: #241a3d;
  --marker-persona: #ec4899;
  --marker-luogo: #4cd471;
  --marker-io: #4a86e8;
  --marker-iniziale: #a78bfa;
  --marker-presenza: #9aa0a6;
  --marker-bloccato: #8e8e93;
  --avatar-sfondo: #13161d;

  /* --- Notifiche ----------------------------------------------------------- */
  /* NOTIFICATION_COLOR dell'app: tinta delle notifiche disegnate dal client. */
  --tinta-notifica: #47c7d9;

  /* --- Chat (Passo 5 della parita' APK, guscio v15) -------------------------
     Valori letti dai componenti NATIVI, non scelti a occhio:
       - src/constants/chat-theme.ts (CHAT_HEADER_*, CHAT_SURFACE_*, BUBBLE_*,
         COMPOSER_BAR_BG, MSG_STATUS_*);
       - src/app/(app)/(tabs)/chat/index.tsx (unreadPill/rowBadge: ciano di
         marca `ACCENT_CYAN` con testo scuro #0B0417);
       - src/components/staff-badge.tsx (bordo bianco al 25%).
     Le superfici "vetro" (0.08/0.10/0.14/0.16/0.20) riusano i token generici
     gia' esistenti (--chip-bg, --card-bg, --card-border-soft, --input-border,
     --card-border): qui stanno SOLO i valori che il guscio non aveva. */
  --chat-intestazione-sfondo: rgba(16, 10, 28, 0.62);
  --chat-intestazione-bordo: rgba(255, 255, 255, 0.18);
  --chat-superficie-sfondo: rgba(16, 10, 28, 0.42);
  --chat-superficie-bordo: rgba(255, 255, 255, 0.14);
  --chat-barre-sfondo: rgba(16, 10, 28, 0.45);
  --chat-bolla-mia-sfondo: rgba(124, 58, 237, 0.7);
  --chat-bolla-mia-bordo: rgba(196, 181, 253, 0.28);
  --chat-bolla-ricevuta-sfondo: rgba(255, 255, 255, 0.1);
  --chat-bolla-ricevuta-bordo: rgba(255, 255, 255, 0.14);
  --chat-bolla-ricevuta-testo: #e8e8e8;
  --chat-meta-mia: rgba(255, 255, 255, 0.7);
  --chat-meta-ricevuta: rgba(255, 255, 255, 0.45);
  --chat-modificato: rgba(255, 255, 255, 0.6);
  --chat-sottotitolo: rgba(255, 255, 255, 0.55);
  --chat-bordo-tenue: rgba(255, 255, 255, 0.25);
  --chat-nonletti-testo: #0b0417;
  /* Testo del banner "conversazione bloccata": `blockedText.color` dell'APK
     (#FFC266, ambra d'avviso). Non e' il rosso degli errori: il blocco e' uno
     stato, non un guasto. */
  --chat-blocco-testo: #ffc266;
  /* Doppia freccia dello stato di recapito: ROSSO = da leggere, VERDE = letto
     (stessa eccezione semantica dichiarata di chat-theme.ts). */
  --chat-stato-non-letto: #ff6b6b;
  --chat-stato-letto: #34d399;

  /* --- Chat Fase A: media, vocale e Assistente (guscio v17) -----------------
     Valori trascritti dai componenti dell'APK:
       - Composer: attachButton (cerchio 42, vetro 8%, bordo 24%);
       - voce: voiceCancel* (rosso 18%/35%, glifo #FF8A94) e voiceStatus
         (rosso 12%, bordo 35%, pallino #FF5252);
       - ChatMediaBubble: riquadro nero al 25%, velo del loader al 45%;
       - chat-ai-ui.tsx: ASSISTANT_ACCENT #C4B5FD, sfondo 10%, bordo 30%. */
  --chat-allegato-sfondo: rgba(255, 255, 255, 0.08);
  --chat-allegato-bordo: rgba(255, 255, 255, 0.24);
  --chat-vocale-sfondo: rgba(255, 82, 82, 0.12);
  --chat-vocale-cestino: rgba(255, 82, 82, 0.18);
  --chat-vocale-bordo: rgba(255, 138, 148, 0.35);
  --chat-vocale-punto: #ff5252;
  --chat-vocale-testo: #ff8a94;
  --chat-media-sfondo: rgba(0, 0, 0, 0.25);
  --chat-media-velo: rgba(0, 0, 0, 0.45);
  --chat-media-testo: #ffffff;
  --chat-audio-pulsante: rgba(255, 255, 255, 0.22);
  --chat-ai-sfondo: rgba(196, 181, 253, 0.1);
  --chat-ai-bordo: rgba(196, 181, 253, 0.3);
  --chat-ai-accento: #c4b5fd;
  --chat-ai-testo: #f1eefa;
  --chat-ai-pulsante: rgba(196, 181, 253, 0.16);

  /* --- Segnali e Profilo (parita' APK, guscio v16) --------------------------
     Valori letti dai componenti NATIVI:
       - bottiglia-card.tsx: shadowColor/shadowOpacity -> --card-ombra,
         segnala.backgroundColor/borderColor -> --social-segnala-*;
       - la CTA disabilitata e' `rgba(255,255,255,0.14)` -> --chip-bg (gia'
         esistente) e l'uscita del Profilo e' il link attenuato del tema.
     Nel Profilo del web non c'e' il tasto "Salva profilo" dell'APK: il profilo
     esteso (foto, bio, gusti) si modifica dall'app, non da questa PWA. */
  --card-ombra: rgba(0, 0, 0, 0.25);
  --social-segnala-sfondo: rgba(255, 180, 180, 0.12);
  --social-segnala-bordo: rgba(255, 180, 180, 0.4);

  /* --- Editor Profilo v25 ---------------------------------------------------
     Il tasto irreversibile e' il rosso di delete-account.tsx (#E03131), non il
     rosa degli errori: e' un'azione distruttiva, non un campo non valido. */
  --profilo-pericolo: #e03131;
  --profilo-pericolo-scuro: #b42323;
  --profilo-pericolo-sfondo: rgba(224, 49, 49, 0.14);
  --profilo-pericolo-bordo: rgba(224, 49, 49, 0.48);

  /* --- Donazioni PayPal (Modulo 2, guscio v19) -----------------------------
     Ringraziamento e conferma usano lo stesso verde semantico del "letto"
     della chat (--chat-stato-letto), ma con un nome proprio: la card non
     dipende dal tema della chat. Importi e superfici riusano i token
     chip/card gia' esistenti. */
  --donazioni-ok: #34d399;
  --donazioni-ok-sfondo: rgba(52, 211, 153, 0.12);
  --donazioni-ok-bordo: rgba(52, 211, 153, 0.4);

  /* --- Tipografia ---------------------------------------------------------- */
  /* Dal guscio v21 i font sono quelli dell'APK, serviti dalla STESSA origine
     (`css/fonts.css`, file in `public/fonts/`): Sora per i titoli, Inter per il
     testo. Nessun font remoto (V3: niente CDN). `--font-sistema` resta la pila
     nativa per i comandi che per contratto NON usano il font del prodotto (per
     esempio il pulsante Google, come nell'APK). */
  --font-sistema: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-testo: 'Inter Nearoo', var(--font-sistema);
  --font-titoli: 'Sora Nearoo', 'Inter Nearoo', var(--font-sistema);
  --dimensione-testo: 16px;
  --dimensione-titolo: 22px;
  --dimensione-piccola: 14px;
  --dimensione-micro: 12px;
  --interlinea: 1.45;
  --peso-normale: 400;
  --peso-medio: 500;
  --peso-forte: 700;

  /* --- Metriche condivise -------------------------------------------------- */
  --raggio-card: 18px;
  --raggio-pillola: 999px;
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 24px;
  --spazio-6: 32px;
  --larghezza-max-contenuto: 560px;
  /* Altezza della barra di navigazione inferiore (guscio v8): la usano la
     barra (min-height delle voci) e il fondo dei pannelli, cosi' l'ultima
     scheda non finisce mai sotto la barra. La safe area si somma a parte. */
  --altezza-barra: 58px;
  --bordo-sottile: 1px;
  /* CAPSULA SOSPESA (guscio v93, 03/11/2026 - D46)
     La barra in basso non e' piu' una fascia a tutta larghezza appoggiata al
     bordo: e' una capsula di vetro SOSPESA (v. `.barra-basso` in app.css),
     staccata dal fondo di `--barra-aria` piu' la safe area, che su iPhone resta
     SOTTO la capsula (indicatore home).
     Due misure, una sola formula:
       - `--barra-aria`: distacco verticale della capsula dal fondo;
       - `--barra-ingombro`: spazio che la capsula occupa DAVVERO, misurato dal
         fondo del viewport = altezza delle voci + i due bordi + il distacco +
         `env(safe-area-inset-bottom)`.
     E' `--barra-ingombro` che i pannelli prenotano in fondo (`.vista`, Chat,
     Home, Radar, Segnali, Profilo, FAB, accesso). Fino al v92 la barra era a
     filo del bordo, quindi la safe area valeva 0 e bastava `--altezza-barra`;
     con la capsula sospesa, prenotare la sola altezza lascerebbe l'ultima riga
     di ogni pannello dietro il vetro (20-34px) nell'app installata.
     `--altezza-barra` resta l'altezza delle VOCI (area di tocco, 58px). */
  --barra-aria: 10px;
  --barra-ingombro: calc(
    var(--altezza-barra) + 2 * var(--bordo-sottile) + var(--barra-aria) + env(safe-area-inset-bottom, 0px)
  );
  /* DISTACCO iOS (guscio v95, 03/11/2026 - D49)
     Su Safari iOS la capsula sospesa risultava schiacciata sul bordo: la safe
     area inferiore non e' sempre riportata (scheda del browser, barra degli
     strumenti compatta) e restava il solo `--barra-aria` (10px). Questo passo in
     piu' si somma SOLO su WebKit/iOS (v. il blocco `@supports
     (-webkit-touch-callout: none)` in app.css): Chrome su Android non riconosce
     quella condizione, quindi la geometria li' resta identica.
     I 6px in piu' stanno dentro i `--spazio-4` (16px) che i pannelli hanno gia'
     sotto `--barra-ingombro`: nessuna prenotazione da ricalcolare. */
  --spazio-vetro-distacco: 6px;
  --durata-veloce: 140ms;
  --durata-media: 260ms;

  /* --- RADAR CONNECT: design system della Dashboard (guscio v85, D38) ------
     Palette del design "Radar Connect" (Google Stitch). Vale per la scheda
     Home, per la scheda RADAR (guscio v88, D40), per la MAPPA GLOBALE
     (guscio v89, D42) e per le classi condivise
     `.glass-card` / `.glass-pill`; le altre schermate restano sul tema indaco di
     `electric-theme.ts` (nessun restyling e' stato chiesto li' e nessun colore
     e' stato cambiato a distanza).

     FONTI: il file di riferimento del design dichiara UN solo colore di fondo
     (`#080514`) e superfici in vetro `rgba(23, 16, 45, 0.65)` con bordo viola
     al 16% (card) e al 22% (pillole). Gli accenti dei marker (ciano, rosa,
     viola, ambra) sono i quattro colori delle categorie di prossimita'.

     REGOLA DI SEMPRE (V7): un colore si scrive SOLO qui. Il foglio di stile
     usa `var(--…)`; la guardia `checks/test-apple-pwa.mjs` (sezione H)
     rifiuta qualunque esadecimale fuori da questo file. */
  --rc-sfondo: #080514;
  --rc-sfondo-alto: #0f0a24;
  --rc-vetro-sfondo: rgba(23, 16, 45, 0.65);
  --rc-vetro-sfondo-pillola: rgba(23, 16, 45, 0.55);
  --rc-vetro-bordo: rgba(139, 92, 246, 0.16);
  --rc-vetro-bordo-pillola: rgba(139, 92, 246, 0.22);
  --rc-vetro-bordo-acceso: rgba(139, 92, 246, 0.42);
  --rc-vetro-riflesso: rgba(255, 255, 255, 0.06);
  --rc-vetro-blur: 16px;
  --rc-raggio-vetro: 22px;
  --rc-raggio-pillola: 999px;
  --rc-ombra: rgba(0, 0, 0, 0.38);
  --rc-viola: #8b5cf6;
  --rc-viola-chiaro: #c4b5fd;
  --rc-ciano: #22d3ee;
  --rc-rosa: #f472b6;
  --rc-ambra: #fbbf24;
  --rc-testo-tenue: rgba(203, 195, 226, 0.72);
  --rc-griglia: rgba(139, 92, 246, 0.1);
  --rc-alone-viola: rgba(139, 92, 246, 0.4);
  --rc-alone-ciano: rgba(34, 211, 238, 0.22);
  --rc-alone-rosa: rgba(244, 114, 182, 0.28);
  --rc-alone-ambra: rgba(251, 191, 36, 0.26);
  --rc-anello-uno: rgba(139, 92, 246, 0.34);
  --rc-anello-due: rgba(139, 92, 246, 0.22);
  --rc-anello-tre: rgba(139, 92, 246, 0.14);
  --rc-sweep-punta: rgba(34, 211, 238, 0.42);
  --rc-sweep-coda: rgba(34, 211, 238, 0);
  --rc-badge-max-sfondo: rgba(34, 211, 238, 0.16);
  --rc-badge-max-bordo: rgba(34, 211, 238, 0.44);
  --rc-badge-new-sfondo: rgba(244, 114, 182, 0.16);
  --rc-badge-new-bordo: rgba(244, 114, 182, 0.44);
  --rc-badge-info-sfondo: rgba(196, 181, 253, 0.14);
  --rc-badge-info-bordo: rgba(196, 181, 253, 0.36);
  --rc-interruttore-spento: rgba(203, 195, 226, 0.28);
  --rc-interruttore-acceso: rgba(34, 211, 238, 0.85);
  --rc-pomello: #f8f7ff;
  /* Pin a goccia dei profili vicini nel widget Radar della Home: la TINTA del
     marker e il suo alone. Il tono (ciano entro 1 km, rosa entro 2, viola oltre,
     `tonoProssimita` di js/radar-controlli.js) si sceglie in app.css
     impostando queste due variabili su `.home__pin--*`; qui ci sono i valori di
     partenza, cosi' un pin senza tono resta comunque nel design system. */
  --pin-tinta: var(--rc-ciano);
  --pin-alone: var(--rc-alone-ciano);
  /* Telemetria e versioni: `JetBrains Mono` se il dispositivo ce l'ha,
     altrimenti il mono di sistema. Nessun font remoto (V3): un .ttf nuovo
     andrebbe aggiunto a `public/fonts/` con la licenza e l'hash della guardia
     (sezione N di `checks/test-apple-pwa.mjs`). */
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, 'Courier New', monospace;

  /* --- Area sicura (viewport-fit=cover + env()) ----------------------------
     Gli inset di sistema si leggono da qui e si usano per i BORDI LATERALI e
     per l'ALTO. Il fondo e' l'eccezione (guscio v56): `--safe-bottom-reale`
     vale 0 in ogni modalita' (v. sotto), quindi la barra tocca il bordo.
     `--safe-bottom` e' l'inset GREZZO e resta leggibile per la diagnostica:
     NON si somma a nessun fondo del guscio. Mai `var(--safe-bottom)` in un
     `padding`/`bottom`. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* --- Barra a FILO del bordo inferiore (guscio v56) -----------------------
     REGOLA: `--safe-bottom-reale` vale SEMPRE 0px. La barra a cinque voci
     tocca il bordo inferiore della pagina in OGNI modalita' (scheda del
     browser e app installata): nessuna fascia vuota sotto le icone. Nessuna
     `env()`, nessuna media query, nessun calcolo di viewport — non c'e' niente
     da interpretare, quindi niente che possa sbagliare.

     STORIA (perche' la regola e' cosi' drastica: due tentativi insufficienti)
       v54  `env(safe-area-inset-bottom) - (100lvh - 100dvh)`: su Safari iOS
            `lvh` e `dvh` possono coincidere anche con le barre VISIBILI, la
            sottrazione valeva 0 e restavano ~34px di fascia sotto le voci.
       v55  `0px` di default + inset dentro `@media (display-mode: standalone…`:
            nella scheda del browser il token era GIA' 0, quindi la fascia vista
            sul device o era la shell VECCHIA servita dalla cache del service
            worker (worker in `waiting` mai attivato: su iOS l'app resta in
            memoria per giorni), o era l'app INSTALLATA, dove l'inset restava
            per scelta.
       v56  azzeramento INCONDIZIONATO (questa regola). Vantaggio collaterale:
            non dipende piu' da nessun token ne' da `display-mode`, quindi
            nemmeno una shell vecchia in cache puo' reintrodurre il padding.

     COMPROMESSO DICHIARATO: nell'app installata le voci stanno piu' vicine
     all'indicatore home (0px di margine invece dell'inset). E' la richiesta
     esplicita del 29/10/2026 ("millimetrico e assoluto, senza alcuno spazio
     sprecato"). Se servisse margine, si riparte da QUI con un record in
     docs/decisioni-apple-nearoo.md (D22), mai rimettendo un calcolo nascosto.

     `--safe-bottom` resta l'inset GREZZO dichiarato dal sistema (leggibile per
     diagnostica), ma il guscio non lo somma a nessun fondo. */
  --safe-bottom-reale: 0px;

  /* --- Altezza VISIBILE misurata all'avvio (guscio v60) --------------------
     I due valori li SCRIVE `js/viewport-stabilizza.js` appena conosce la misura
     vera del viewport (all'avvio, e poi a ogni resize/orientamento). Qui ci sono
     le dichiarazioni di partenza, cosi' il foglio di stile e' completo anche
     senza JavaScript: `--vh` = altezza dinamica del browser, `--barra-scarto` =
     0. La guardia `checks/test-apple-pwa.mjs` pretende ogni `var(--x)` usata
     definita QUI: mai scriverli a mano in app.css.

     `--barra-scarto` e' SOLO DIAGNOSTICA dal v83 (D36): il foglio di stile non
     la consuma piu'. Fino al v82 valeva 34-59px nella PWA INSTALLATA e spostava
     la barra sotto il bordo inferiore (`margin-bottom` negativo): ora resta a
     `0px` e la barra e' sempre `bottom: 0` dentro il viewport.

     `--vh` e' l'area CHE SI VEDE e non di piu' (guscio v84, D37): app.css la usa
     come `height: min(var(--vh, 100dvh), 100dvh)`, quindi un valore piu' alto del
     viewport (per esempio `screen.height` scritto da una shell vecchia in cache)
     non puo' allungare il guscio e spingere il composer della Chat sotto la barra. */
  --vh: 100dvh;
  --barra-scarto: 0px;

  /* --- Cima del viewport VISIBILE (guscio v66) ----------------------------
     Con la TASTIERA aperta su iOS la finestra visibile si sposta (WebKit la
     scorre per mostrare il campo) mentre `body` e' `position: fixed` e resta
     ancorato al viewport di layout: `body` prende questo scostamento come
     `top` e torna a coincidere con l'area che si vede. Lo scrive
     `js/viewport-stabilizza.js`; a tastiera chiusa vale 0px (nessuna
     differenza rispetto a prima). */
  --vv-top: 0px;

  /* --- Spazio coperto dalla TASTIERA in fondo allo schermo (guscio v82) ----
     Con la tastiera aperta su iOS la finestra visibile si accorcia ma la barra
     in basso e' `position: fixed; bottom: 0` sul viewport di LAYOUT: resterebbe
     dietro la tastiera, cioe' irraggiungibile. Questo valore e' l'ingombro della
     tastiera (fondo del layout - cima visibile - altezza visibile) e la barra si
     alza di tanto, restando appoggiata al fondo dell'area che si vede. A
     tastiera chiusa vale `0px`: la barra torna al bordo vero. Lo scrive
     `js/viewport-stabilizza.js`; la dichiarazione qui serve al foglio di stile
     anche senza JavaScript (e alla guardia che pretende ogni `var(--x)` usata
     definita in questo file). */
  --tastiera-altezza: 0px;
}