/* Field A1 — colore.
   Riallineato al Manuale di Brand v1.7 (14 agosto 2026), capitolo 18.

   La regola che governa questo file: il BIANCO è il fondo dominante, anche sul sito.
   Il nero non è un tema alternativo, è il POLO OPPOSTO — arriva come fotografia a tutto
   schermo e come sezione piena che interrompe il bianco (Manuale cap. 15 e 23).
   Per questo i token semantici hanno due stati: il default è «ordine», e lo scope
   [data-superficie="caos"] li ripunta sulla rampa scura. Nessun componente va duplicato. */

:root{
/* ---- Base: quattro colori di marca ---------------------------------- */
--fa1-black:#0F0E0C;   /* Nero Field — nero caldo, non assoluto */
--fa1-white:#FFFFFF;   /* Bianco — fondo dominante */
--fa1-grey:#888888;    /* Grigio Testo di marca — STAMPA e usi che NON portano testo.
                          Su bianco fa 3,54:1 e non è utilizzabile per il testo a schermo:
                          nel digitale si sdoppia in --grey-700 e --grey-400 (Manuale cap. 18). */
--fa1-yellow:#FFE400;  /* Giallo Segnale — segnale d'interfaccia E accento grafico, max ~5% */

/* ---- Rampa carta: le superfici delle pagine ordine e servizio ------- */
--paper-0:#FFFFFF;
--paper-50:#FAF9F8;
--paper-100:#F4F3F1;
--paper-200:#E4E2DE;   /* filetti decorativi su bianco: non porta testo */

/* ---- Rampa neutra calda: le superfici delle pagine caos ------------- */
--ink-1000:#080706;
--ink-900:#0F0E0C;
--ink-850:#141311;
--ink-800:#1A1916;
--ink-700:#22201C;
--ink-600:#2C2A25;
--ink-500:#3A3733;

/* ---- Grigi di testo: un valore per fondo, non uno solo -------------- */
/* Nessun grigio unico passa la soglia AA su bianco E su nero: servono due valori. */
--grey-700:#6E6B66;    /* 5,31:1 su bianco — testo secondario nelle pagine ordine */
--grey-600:#8A8884;    /* 5,45:1 su Nero Field — testo secondario piccolo nelle pagine caos.
                          Su bianco fa 3,54:1: sufficiente per i BORDI, mai per il testo. */
--grey-400:#A6A39E;    /* 7,68:1 su Nero Field — testo secondario nelle pagine caos */
--grey-300:#C7C4BE;

/* ---- Giallo --------------------------------------------------------- */
--yellow-500:#FFE400;
--yellow-600:#E6CE00;  /* hover / press su superfici gialle */
--yellow-a24:rgba(255,228,0,.24);
--yellow-a12:rgba(255,228,0,.12);

/* ==== SEMANTICI — stato «ordine» (default) =========================== */

/* Superfici */
--surface-base:var(--paper-0);
--surface-raise:var(--paper-50);
--surface-card:var(--paper-50);
--surface-inset:var(--paper-100);
--surface-invert:var(--fa1-black);
--surface-scrim:rgba(8,7,6,.72);
--surface-media:var(--paper-100);     /* fondo dietro i segnaposto immagine */

/* Testo */
--text-primary:var(--fa1-black);
--text-secondary:var(--grey-700);
--text-secondary-sm:var(--grey-700);  /* su bianco non serve un secondo gradino: 5,31:1 regge */
--text-muted:var(--grey-700);
/* --text-accent è il colore di un TESTO che vuole risaltare (numeri d'indice, asterischi
   di campo obbligatorio, cifre grandi). Su fondo bianco NON può essere giallo: 1,28:1,
   illeggibile. Il Manuale cap. 18 è esplicito, quindi qui il testo accentato è nero e il
   giallo resta dov'è leggibile — sui filetti, sui bordi, sugli stati, e come campitura
   con testo Nero Field sopra. Dentro una superficie caos torna giallo. */
--text-accent:var(--fa1-black);
--text-on-accent:var(--fa1-black);    /* testo sopra una campitura gialla — 15:1 */
--mark-accent:var(--yellow-500);      /* il giallo come SEGNO: filetti, bordi, indicatori,
                                         campiture. Questo non porta mai testo addosso. */
--text-on-invert:var(--fa1-white);
--text-on-invert-secondary:var(--grey-400);

/* Bordi */
--border-hairline:rgba(15,14,12,.12);
--border-strong:rgba(15,14,12,.24);
--border-solid:var(--paper-200);
--border-field:var(--grey-600);       /* bordi di campi e controlli: 3,54:1, sufficiente */
--border-accent:var(--yellow-500);
--border-on-invert:rgba(255,255,255,.12);

/* Stati */
--state-active:var(--yellow-500);
--state-hover-veil:rgba(15,14,12,.06);
--state-press-veil:rgba(15,14,12,.12);
--state-veil-on-invert:rgba(255,255,255,.10);  /* velo su una superficie invertita */

/* Il dispositivo di evidenziazione (Manuale cap. 20).
   Su fondo bianco: blocco Nero Field, testo bianco.
   Sopra le fotografie si inverte — vedi lo scope caos. La variante gialla non esiste. */
--evidenza-bg:var(--fa1-black);
--evidenza-fg:var(--fa1-white);

/* ---- Anello di messa a fuoco, a due tratti (Manuale cap. 18) -------- */
/* Su bianco un anello giallo da solo è invisibile. 2px di giallo + 1px di nero esterno:
   sul bianco la visibilità la garantisce il nero, sul nero la garantisce il giallo.
   Lo stesso anello funziona su qualunque superficie, quindi NON cambia nello scope caos. */
--focus-ring:var(--yellow-500);
--focus-ring-outer:var(--fa1-black);
--focus-ring-width:2px; /* @kind spacing */
--focus-ring-offset:2px; /* @kind spacing */
--focus-ring-shadow:0 0 0 var(--focus-ring-width) var(--focus-ring),0 0 0 calc(var(--focus-ring-width) + 1px) var(--focus-ring-outer); /* @kind shadow */

/* ---- Gradienti di protezione (solo su immagine, mai decorativi) ----- */
--scrim-bottom:linear-gradient(180deg,rgba(8,7,6,0) 0%,rgba(8,7,6,.55) 60%,rgba(8,7,6,.92) 100%); /* @kind other */
--scrim-top:linear-gradient(0deg,rgba(8,7,6,0) 0%,rgba(8,7,6,.72) 100%); /* @kind other */
}

/* ==== SEMANTICI — stato «caos» ======================================= */
/* Si applica a una sezione, a una slide o a una pagina intera:
     <section data-superficie="caos"> … </section>
   Serve per le copertine, le aperture di capitolo e le sezioni piene che interrompono
   il bianco. Non è un tema scuro dell'interfaccia: è l'altro polo del ritmo. */

[data-superficie="caos"],.fa1-caos{
--surface-base:var(--ink-900);
--surface-raise:var(--ink-850);
--surface-card:var(--ink-800);
--surface-inset:var(--ink-1000);
--surface-invert:var(--fa1-white);
--surface-media:var(--ink-700);

--text-primary:var(--fa1-white);
--text-secondary:var(--grey-400);
--text-secondary-sm:var(--grey-600);   /* sotto i 16px il gradino più chiaro non serve: 5,45:1 */
--text-muted:var(--grey-600);
--text-on-invert:var(--fa1-black);
--text-on-invert-secondary:var(--grey-700);
/* Sul nero il giallo torna leggibile e riprende il suo ruolo di accento anche sul testo. */
--text-accent:var(--yellow-500);

--border-hairline:rgba(255,255,255,.12);
--border-strong:rgba(255,255,255,.24);
--border-solid:var(--ink-600);
--border-field:var(--ink-500);
--border-on-invert:rgba(15,14,12,.16);

--state-hover-veil:rgba(255,255,255,.06);
--state-press-veil:rgba(255,255,255,.12);
--state-veil-on-invert:rgba(15,14,12,.10);

/* L'inversione del dispositivo di evidenziazione, decisa il 2 agosto 2026:
   sopra una fotografia un blocco nero perde il bordo e sembra testo composto male. */
--evidenza-bg:var(--fa1-white);
--evidenza-fg:var(--fa1-black);

/* Attenzione: l'inversione da sola non basta. Sopra una fotografia serve anche uno scrim
   scuro e uniforme, e si verifica la leggibilità di TUTTO il testo, non solo della parte
   dentro il blocco (Manuale cap. 20). */
}

/* Una superficie caos deve dipingersi il fondo: senza questa riga eredita i token
   ma resta su carta bianca. */
[data-superficie="caos"],.fa1-caos{background:var(--surface-base);color:var(--text-primary)}