# Inlumia Corsi: sistema visivo

Tutto sta in `app/src/app.css` (token e componenti) e in pochi componenti Svelte. Prima di aggiungere uno stile nuovo, controllare se c'è già.

## Colori

- **Marca**: `brand-50` … `brand-900`, scala del blu del logo (`brand-500` = `#016f96`). Il blu serve per le azioni principali, la voce di menu attiva e i link. Non si usa per decorare.
- **Neutri** (dal sito inlumia.it, leggermente verdi): `inchiostro` per il testo, `grigio` per il testo secondario, `linea` per bordi e divisori, `sfondo` per lo sfondo delle pagine. Le schede sono bianche.
- **Stati**: verde (`verde`, `emerald-*`) per completato, attivo, salvato; ambra per bozza e in scadenza; rosso per errori, scaduto, azioni distruttive.

## Caratteri

- Titoli `h1`, `h2`, `h3` in **Oswald** (come il sito Inlumia). Tutto il resto, pulsanti ed etichette compresi, in **Open Sans**.
- `h1` di pagina `text-3xl`, titolo di riquadro `text-lg`, testo `text-sm`/`text-base`, note `text-xs`.
- Nei campi il testo è a 16 px: sotto, Safari su iPhone ingrandisce la pagina quando si tocca il campo.

## Pulsanti e campi

Due sole altezze, così pulsanti e campi sulla stessa riga combaciano:

| Classe | Altezza | Uso |
|---|---|---|
| `.campo` (input e select), `.btn` | 44 px | normale; è anche l'area minima da toccare al telefono |
| `.campo-piccolo`, `.btn-piccolo` | 36 px | solo azioni ripetute in una riga di elenco (Rinomina, Elimina, Togli, Esci) |
| `.campo-codice` | 56 px | codici a 6 cifre |

Gerarchia dei pulsanti:

- `.btn-primario` (blu pieno): l'azione principale, **una per riquadro**;
- `.btn-secondario` (bordo): azioni alternative;
- `.btn-testo` (solo testo blu): azioni di contorno, come "Modifica area" nell'intestazione di un'area;
- `.btn-pericolo` (bordo rosso): eliminare, sospendere.

Mai sovrascrivere l'altezza con `py-*` su un `.btn`: se serve una misura diversa, va aggiunta qui.

## Superfici

- `.scheda`: riquadro bianco con bordo e angoli da 12 px. Non si mettono schede dentro le schede.
- Gruppi di numeri (report): un'unica scheda divisa in celle, non tante schede uguali.
- Avvisi: `.avviso-ok`, `.avviso-errore`; per i messaggi dopo un'azione si usano `role="status"` o `role="alert"`.

## Testi

- Italiano semplice, del "tu" per i corsisti.
- Conteggi con `conteggio(n, 'lezione', 'lezioni')` da `$lib/date`, per non scrivere "1 lezioni".
- Il separatore ` · ` dentro un blocco `{#if}` va scritto come `{' · '}`: Svelte toglie lo spazio iniziale del blocco.
- Date sempre all'italiana (`dataBreve`, `dataOra`); se una data arriva come `AAAA-MM-GG` dentro un testo, va convertita prima di mostrarla.