/* ============================================================
   Basi del brand per le pagine dell'app: il carattere Wafo, i token colore e le icone 3D nei titoli.
   Lo importa nav.css, quindi arriva su ogni pagina con la barra; le pagine senza barra lo collegano da sé.
   Sorgente dei valori: docs/brand/wamia-brand.css e docs/brand/README.md (linee guida).
   ============================================================ */

@font-face { font-family: "Wafo"; src: url("/fonts/Wafo-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Wafo"; src: url("/fonts/Wafo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Wafo"; src: url("/fonts/Wafo-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Wafo"; src: url("/fonts/Wafo-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Wafo"; src: url("/fonts/Wafo-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
    /* Wafo ha solo Thin (100), Regular (400) e Bold (700): i pesi intermedi li sceglie il browser fra questi. */
    --wm-font: "Wafo", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --wm-mint: #2bdd9e;
    --wm-green: #0ea886;
    --wm-petrol: #01705f;
    --wm-ink: #0b1f24;
    --wm-ink-deep: #06151a;
    --wm-cream: #f1f7f4;
}

/* Icona 3D in testa al titolo di una pagina (chat, agenda, template…): decorativa, alt="" nel markup.
   Si ridimensiona col titolo; le immagini sono 192 px, abbastanza per gli schermi ad alta densità. */
.titolo-icona {
    display: inline-block;
    width: 1.55em;
    height: 1.55em;
    margin-right: 0.3em;
    vertical-align: -0.42em;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(6, 21, 26, 0.18));
}
/* L'icona e la prima parola del titolo vanno a capo insieme: l'icona non resta mai da sola su una riga. */
.titolo-testa { white-space: nowrap; }