/* ============================================================
HUB STYLE β foglio di stile condiviso del backend Deluxe
------------------------------------------------------------
CAPITOLATO (regole inderogabili):
1) FONT UFFICIALE = Manrope. Mai usarne altri.
2) ICONE = SOLO Material Symbols Outlined (https://fonts.google.com/icons),
peso 300, FILL 0. Mai piΓΉ emoji (π πΎβββ ) nell'UI dell'Hub β
sostituirle sempre con nome_icona .
Eccezione: i non possono renderizzare font custom,
quindi nelle option si usa solo testo (niente emoji nΓ© icone).
3) PRIMARY COLOR = navy soft #34567a (--accent). Accent secondario oro
#e6a540 (--accent-2). Mai introdurre altre sfumature di blu.
4) NAMING BOTTONI = .btn + modificatori .primary / .danger / .ghost / .small
(NON .btn-primary stile bootstrap).
5) FONT-WEIGHT MAX = 500 (medium) in generale. Mai 600/700 per body text,
header tabelle, label form, ecc. ECCEZIONE: titoli di tile/card "hero"
che danno gerarchia visiva forte (es. h3 dentro .tile della Home,
titoli di sezione principale) β 700 ammesso. Decisione 14/05/2026.
6) TOKEN-DRIVEN: ogni colore/spazio/raggio passa SEMPRE da una variabile
in :root. Niente hex codes hardcoded nelle pagine.
7) PALETTE SFONDO = off-white caldo (--bg-0 #fcfbf9). Scelta 14/05/2026,
sostituisce il beige #f7f3ec.
8) NIENTE VIOLA / PURPLE / VIOLET nell'UI Hub. Mai. Se serve un colore
distintivo per categoria/zona, usare azzurro, verde, arancio, navy
o gold del brand. Decisione 14/05/2026 (sostituito #8e4585 Assisi
con azzurro #2b7fb5).
Come si usa in una pagina HTML, nel :
save oppure delete
Catalogo nomi: https://fonts.google.com/icons */
.icon {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-flex;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
vertical-align: -3px;
font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 0, 'GRAD' 0;
}
.icon.sm { font-size: 16px; vertical-align: -2px; }
.icon.lg { font-size: 22px; vertical-align: -5px; }
/* ---------- 14. UTILITY ---------- */
.muted { color: var(--muted); }
.text-sm { font-size: var(--fs-sm); }
.text-right { text-align: right; }
.flex { display: flex; gap: var(--space-2); align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.hidden { display: none !important; }