/* Sistema visivo. Un posto solo per colori, tipografia, spaziature e
   materiali: le schermate successive li riusano invece di ricopiarli.
   Estratto dal design della schermata Oggi, variante A. */

:root {
  /* ---- Colore ------------------------------------------------------
     Impianto scuro Apple: nero di base, etichette a opacita' decrescente.
     I livelli di etichetta sono verificati per contrasto (WCAG 2.1) sul
     colore RISULTANTE, non su quello del vetro: una superficie
     traslucida lascia passare il fondo.
       primaria   14,68 : 1
       secondaria  9,36 : 1
       terziaria   5,45 : 1
       tenue       2,44 : 1  -> SOLO segnaposto, mai informazione */
  --fondo: #000000;
  --etichetta: #ffffff;
  --etichetta-2: rgba(235, 235, 245, 0.85);
  --etichetta-3: rgba(235, 235, 245, 0.6);
  --etichetta-tenue: rgba(235, 235, 245, 0.3);
  --separatore: rgba(84, 84, 88, 0.5);

  /* Menta, scelta il 21/08/2026 fra sei accenti messi a confronto.
     Il rosso era gia' speso per l'allarme e il verde pieno per la
     conferma: restavano le tinte fredde. 13,19:1 sul nero. */
  --accento: #5be3c0;
  --su-accento: #00291f;
  --accento-ombra: rgba(91, 227, 192, 0.28);

  --allarme: #ff453a;
  --allarme-testo: #ff8d85;
  --allarme-fondo: rgba(255, 69, 58, 0.1);
  --allarme-bordo: rgba(255, 69, 58, 0.42);
  --conferma: #30d158;

  /* ---- Tipografia --------------------------------------------------
     SF Pro di sistema: nessun font scaricato, perche' l'applicazione
     deve funzionare offline. */
  --carattere: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'SF Pro Display', system-ui, sans-serif;

  --t-grande: 32px;   /* titolo della giornata */
  --t-titolo: 24px;   /* titolo di un foglio */
  --t-sezione: 21px;
  --t-corpo: 17px;
  --t-voce: 15px;
  --t-piccolo: 13px;
  --t-minuto: 11px;

  /* ---- Spazio e forma ----------------------------------------------
     Raggi concentrici, come iOS: il raggio interno e' l'esterno meno il
     padding. Con --r-riquadro 22 e --s-riquadro 14 l'interno viene 8. */
  --s-bordo: 16px;    /* margine laterale della schermata */
  --s-riquadro: 14px; /* padding dentro un riquadro */
  --s-tra: 12px;      /* distanza fra riquadri */

  --r-barra: 30px;
  --r-foglio: 40px;
  --r-riquadro: 22px;
  --r-controllo: 18px;
  --r-interno: 8px;

  /* Mai sotto 44 punti: e' il minimo iOS, e questi gesti si compiono
     di fretta. */
  --bersaglio: 44px;
  --bersaglio-grande: 60px;
}

/* ---- Materiali ------------------------------------------------------
   La rifrazione vera di Liquid Glass usa filtri SVG dentro
   backdrop-filter, che Safari NON supporta: restano sfocatura,
   saturazione, bordo speculare e ombra, che sono la parte percepita.
   Poche superfici sfocate per schermata: ognuna costa GPU, e l'app deve
   scorrere fluida su un telefono. */

.vetro {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.32),
    0 8px 28px rgba(0, 0, 0, 0.38);
}

.vetro-sottile {
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
}

.vetro-barra {
  background: rgba(20, 20, 22, 0.62);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

.vetro-foglio {
  background: rgba(28, 28, 30, 0.78);
  backdrop-filter: blur(50px) saturate(190%);
  -webkit-backdrop-filter: blur(50px) saturate(190%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.22),
    0 -20px 60px rgba(0, 0, 0, 0.6);
}

/* Luce sotto il vetro: senza qualcosa da sfocare, il vetro non esiste. */
.luce {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 75% at 12% -5%, rgba(91, 227, 192, 0.18), transparent 58%),
    radial-gradient(95% 65% at 92% 55%, rgba(60, 180, 220, 0.15), transparent 55%),
    radial-gradient(85% 55% at 45% 108%, rgba(99, 230, 226, 0.12), transparent 60%);
}

@media (prefers-reduced-transparency: reduce) {
  .vetro,
  .vetro-sottile {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #1c1c1e;
  }
  .vetro-barra,
  .vetro-foglio {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #161618;
  }
  .luce {
    display: none;
  }
}