/* ============================================================
   FTMU — base globale dello shell: token, background botanico, tipografia
   base, primitive di superficie condivise. Caricato per PRIMO su tutte le
   19 route. (B9B → B10A)

   B10A: UNICA authority dei token. La famiglia `--bf-*` (semantica, completa)
   è la sorgente; la famiglia corta `--ink/--muted/--line/--green/--green-soft`
   resta come ALIAS retro-compatibile (le route CSS pre-B8 la usano ancora).
   ============================================================ */
:root {
  color-scheme: light;

  /* --- token semantici (authority) --- */
  --bf-bg: #f4f7f1;
  --bf-surface: #ffffff;       /* card / pannello */
  --bf-surface-2: #eef3ea;     /* riquadro interno, chip */
  --bf-border: #e2e8dc;        /* bordo pieno */
  --bf-line: rgba(90, 120, 90, .22);   /* bordo sottile (era .20 bf-theme / .22 bf-home → il più visibile) */
  --bf-text: #2b3a2e;
  --bf-muted: #6f7d70;
  --bf-faint: #9aa89b;
  --bf-accent: #4f8a52;        /* verde principale */
  --bf-accent-2: #3c7540;
  --bf-accent-soft: #e9f2e6;
  --bf-ok: #2f9e5c;
  --bf-warn: #c98a3a;
  --bf-danger: #c0453d;
  --bf-danger-soft: #fbecea;
  --bf-info: #3a7bbf;
  --bf-shadow: 0 6px 22px rgba(60, 90, 60, .09);

  /* --- alias retro-compatibili (stesso colore, nomi vecchi) --- */
  --ink: var(--bf-text);
  --muted: var(--bf-muted);
  --line: var(--bf-line);
  --green: var(--bf-accent);
  --green-soft: var(--bf-accent-soft);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  color: var(--ink);
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  min-height: 100vh;
  background-color: #f5f8f2;
  background-image:
    linear-gradient(rgba(245, 248, 242, .93) 0, rgba(245, 248, 242, .86) 260px, rgba(245, 248, 242, .88) 100%),
    url("img/webp/sfondo-home.webp");
  background-repeat: repeat, repeat;
  background-size: auto, 520px;
  background-position: center, center;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 28px);
}
.wrap { max-width: 560px; margin: 0 auto; }

.back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  color: var(--muted); text-decoration: none; font-size: .82rem;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 12px;
}
.back:active { opacity: .6; }

/* .home-head rimossa in B9B: era l'intestazione logo+avatar delle pagine MPA
   pre-shell (ora la fa #bf-shell-header). Zero consumer nelle route. */

.hello { font-size: 1.4rem; font-weight: 600; margin: 2px 2px 6px; }
.hello small { display: block; font-size: .8rem; color: var(--muted); font-weight: 400; margin-top: 2px; }
.lead { margin: 0 2px 14px; font-size: .86rem; color: var(--muted); line-height: 1.45; }

/* ---- primitive di superficie ---- */

/* card/pannello primario: fondo pieno, ombra marcata */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 6px 22px rgba(60, 90, 60, .08);
}

/* PRIMITIVA UNICA "nota informativa" (B9B): testo descrittivo/disclaimer/intro/
   empty-state non deve poggiare sullo sfondo botanico. Warm-white ad alta
   opacità, bordo verde sottile, ombra minima, radius coerente. Le route
   mantengono le proprie font-size/color/margin: qui si aggiunge solo la scatola.
   `.lead`/`.intro` sono i due nomi usati dalle route per l'intro descrittiva. */
.hint, .disclaimer, .sez-info, .pre-note, .cta-note, .bf-nota,
.lead, .intro, .bf-empty {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(79, 138, 82, .28);
  border-radius: 14px;
  padding: 12px 15px;
  box-shadow: 0 3px 12px rgba(60, 90, 60, .05);
}
/* variante empty-state: stessa superficie, centrata, più aria */
.bf-empty {
  border-radius: 16px; padding: 26px 18px;
  text-align: center; line-height: 1.55; color: var(--muted); font-size: .9rem;
}
/* un contenitore vuoto (riempito da JS) non mostra una scatola vuota */
.hint:empty, .disclaimer:empty, .sez-info:empty, .pre-note:empty, .cta-note:empty,
.bf-nota:empty, .intro:empty { display: none; }

footer { margin-top: 24px; text-align: center; font-size: .72rem; color: #9aa89b; }