/* ============================================================
   dayotto — fondamenta
   Colori e caratteri: brand manual. Valori dei token: prototipo della daily,
   che li riprende uno per uno dal brand manual.

   Registro in-app, «lo strumento che sussurra»:
   · niente maiuscolo nei titoli
   · liste a colonna singola
   · emoji come ancore visive fisse
   · molta aria, contrasto alto, niente sfumature

   Isolamento tassativo: i tre colori semantici vivono SOLO dentro
   i tre indicatori di punteggio. Mai in pulsanti, fondi o testi.
   ============================================================ */

:root {
  /* identità */
  --iris: #5E52F6;  --iris-h: #4F42E8;  --iris-soft: #EEECFE;  --iris-ink: #3B31C4;
  --coral: #FF5E62; --coral-soft: #FFEFEF; --coral-ink: #A62E31;
  --citron: #FFAA33; --citron-soft: #FFF4E2; --citron-ink: #8A5A00;
  /* verde d'interfaccia, «va bene per il tuo piano» (Charlie, 2026-10-05; decisioni.json → aspettoVoci).
     Non è il Verde Semantico degli indicatori: stessa tinta, più scuro perché si legga su fondo chiaro. */
  --verde: #03A866; --verde-soft: #E6FAF2; --verde-ink: #047A50;
  --paper: #F6F8FD; --card: #FFFFFF; --obsidian: #0B0F19;
  --ink: #0B0F19; --muted: #5A6172; --faint: #8A90A0; --line: #E3E7F0;

  /* semantici — riservati ai tre indicatori, e a nient'altro.
     Usati da semaforo (decisione di Charlie, decisioni.json): verde bene, giallo così così, rosso male. */
  --s-bene: #05D285; --s-medio: #FF9E0B; --s-male: #FF3B30;

  /* forma */
  --r: 18px;
  --bd: 1.5px solid var(--obsidian);
  --pop: 2.5px 2.5px 0 var(--obsidian);
  --pop-sm: 2px 2px 0 var(--obsidian);

  /* caratteri */
  --brand: 'Bricolage Grotesque', system-ui, sans-serif;
  --testo: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* misure dell'app */
  --larghezza: 540px;
  --barra: 68px;
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; background: var(--paper); color: var(--ink); }

body {
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* spazio per la barra in basso, più il bordo sicuro dei telefoni con la tacca */
  padding-bottom: calc(var(--barra) + 24px + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-family: var(--brand);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  /* mai maiuscolo nei titoli: regola del brand manual per la dislessia */
  text-transform: none;
}

button { font: inherit; color: inherit; }
a { color: var(--iris-ink); }

.wrap { max-width: var(--larghezza); margin: 0 auto; padding: 0 18px; }

/* chi si muove con la tastiera deve sempre vedere dove si trova */
:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; border-radius: 6px; }
/* il contenitore della schermata riceve il fuoco solo per annunciarla ai lettori di schermo: niente cornice */
#vista:focus { outline: none; }

/* testo per chi usa un lettore di schermo, invisibile a occhio */
.solo-lettore {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}