/* ══════════════════════════════════════════════════════════════════════
   mAI — stile di famiglia            (DEC-1279, 16/09/2026)

   Un foglio solo per tutte le applicazioni del pacchetto: mAIcrm, mAIsell,
   maifolder e quelle che verranno. Chiesto da Fabrizio:

     «non puoi adottarlo come stile mAIxxxx in modo che tutta la serie
      delle applicazioni che andremo a sviluppare in questo pacchetto
      abbiano lo stesso stile?»

   ⚠️ Prima di questo file la stessa tavolozza stava scritta a mano in tre
   pagine, con nomi diversi (`--acc`, `--accent`, `--txt`, `--text`…): tre
   copie che si allineano a mano e prima o poi non sono piu' allineate. Qui
   il valore sta in UN posto e le pagine lo puntano.

   ── da dove vengono i valori ──────────────────────────────────────────
   Sono quelli del pannello di mAIcrm, arrivati dal canale
   (`scambio/da-maicrm/allegati/CODICE-PANNELLO-stile.css.txt`). Non sono
   stati ricavati a occhio da uno screenshot.

   ── come si usa ───────────────────────────────────────────────────────
       <link rel="stylesheet" href="/assets/mai-stile.css">
   e nella pagina NON si ridichiara `:root`. Quello che resta nella pagina
   e' solo cio' che e' suo: la disposizione e i pezzi che esistono li'.

   ── i nomi ────────────────────────────────────────────────────────────
   Sotto ci sono i nomi CANONICI e, in coda, gli ALIAS storici delle pagine
   che c'erano prima (`--acc`, `--card`, `--txt`…). Gli alias servono a non
   dover riscrivere centinaia di regole in un colpo solo: chi scrive codice
   nuovo usa i canonici. Un alias si toglie quando nessuno lo usa piu', non
   quando sembra brutto.

   ⚠️ Il carattere e' `system-ui`: quello del sistema di chi guarda. E' anche
   il motivo per cui due nostre applicazioni aperte sullo stesso schermo si
   assomigliano davvero, invece di somigliarsi solo nei nostri screenshot.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* superfici */
  --bg:#f5f7fa; --surface:#ffffff; --surface-2:#fafbfc; --surface-3:#eef0f2;
  --border:#d8dde3; --border-strong:#c6ccd4;

  /* testo */
  --text:#1f2933; --text-soft:#6b7785; --text-faint:#8b95a1;

  /* azione */
  --accent:#2563eb; --accent-dk:#1d4ed8; --accent-soft:#eff4ff;

  /* semantici — verde/rosso/ambra solo per significato, mai per decorare */
  --success:#15803d; --success-soft:#f0fdf4;
  --danger:#dc2626;  --danger-soft:#fef2f2;
  --warn:#b45309;    --warn-soft:#fffbeb;

  /* ⚠️ i tre livelli della distribuzione (DEC-857) NON sono decorazione:
     si allontanano in TINTA, non solo in luminosita', per restare
     distinguibili stampati in bianco e nero e a chi confonde rosso e verde.
     Non vanno riportati dentro la tavolozza principale. */
  --liv-centrale:#2563eb; --liv-centrale-soft:#eff4ff;
  --liv-insegna:#b45309;  --liv-insegna-soft:#fffbeb;
  --liv-azienda:#15803d;  --liv-azienda-soft:#f0fdf4;

  /* forma */
  --radius:8px; --radius-sm:5px;
  --shadow-sm:0 1px 2px rgba(15,18,25,.06);
  --shadow:0 2px 6px rgba(15,18,25,.06),0 10px 24px rgba(15,18,25,.08);

  /* carattere */
  --font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;

  /* l'intestazione e' bianca col filo sotto, non una barra scura */
  --header-bg:#ffffff;

  /* ── alias storici: le pagine di prima li usano ancora ────────────── */
  --card:var(--surface); --line:var(--border); --dark:var(--surface-3);
  --acc:var(--accent); --acc-soft:var(--accent-soft);
  --txt:var(--text); --mut:var(--text-soft);
  --ok:var(--success); --ok-soft:var(--success-soft);
  --err:var(--danger); --err-soft:var(--danger-soft);
  --header:var(--header-bg);
}

/* ── base comune ──────────────────────────────────────────────────────
   Solo cio' che e' davvero di tutti. Una pagina che ha bisogno di altro
   lo scrive da se': questo file non deve diventare il posto dove finisce
   ogni regola di ogni pagina. */
*{box-sizing:border-box}
body{margin:0;font:var(--font);color:var(--text);background:var(--bg)}
.mono,code,kbd{font-family:var(--font-mono)}
a{color:var(--accent)}

/* pallini di stato — il vocabolario comune del pacchetto */
.pallino{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px}
.pallino.ok{background:var(--success-soft);color:var(--success)}
.pallino.manca{background:var(--danger-soft);color:var(--danger)}
.pallino.attenzione{background:var(--warn-soft);color:var(--warn)}
.pallino.fuori{background:var(--surface-3);color:var(--text-soft)}