/* Token grafici di EvoXa — direzione «Arena» (EvoXa_sviluppo\grafica_evoxa.md, vincolante;
   scelta il 21.09.2026 con /jack-grafica, punto 9). L'unico posto con colori, font, misure:
   nel resto del CSS e nelle pagine si usano solo var(--...). I nomi sono un contratto con
   .claude/rules/grafica.md: si cambiano i valori, non i nomi.
   Font dentro il progetto (font/), presi dal pacchetto marchio EvoXa: nessuna richiesta a
   Google, e le pagine funzionano anche senza rete. Sora è un font variabile (un file per
   tutti i pesi), diviso in latin e latin-ext come lo serve Google Fonts. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(font/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(font/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(font/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marchio EvoXa (grafica_evoxa.md §2): nomi e valori ufficiali. Il gradiente sta solo nel
     simbolo e nella X del wordmark: mai su bottoni, sfondi, card. L'ambra come testo solo su
     bruno o antracite, mai su avorio. */
  --evx-antracite: #1E1E24;
  --evx-bruno: #1A1512;
  --evx-avorio: #FAF7F2;
  --evx-ruggine: #C2410C;
  --evx-ambra: #FFA640;
  --evx-palco-chiaro: #8A2A0A;
  --evx-palco-scuro: #FFB020;
  --evx-tagline: #7A6E66;
  --evx-testo-3: #B8ABA0;             /* testo tenue su bruno (8:1); su avorio solo disabilitato */
  --evx-grad-chiaro: linear-gradient(135deg, #C2410C, #FFA640);
  --evx-grad-scuro: linear-gradient(135deg, #FF6A2B, #FFD166);

  /* Colori con un ruolo. */
  --colore-sfondo: #FAF7F2;           /* avorio: fondo della pagina */
  --colore-superficie: #FFFFFF;       /* card, pannelli, testata */
  --colore-testo: #1E1E24;            /* antracite */
  --colore-testo-tenue: #5C544D;      /* testo secondario: 6.9:1 su avorio */
  --colore-bordo: #E6DED4;            /* separatori e contorni decorativi */
  --colore-bordo-campo: #8C7E72;      /* contorno di campi e controlli: 3.7:1 */
  --colore-primario: #C2410C;         /* ruggine: azioni, link, stati attivi */
  --colore-primario-hover: #A3360A;
  --colore-su-primario: #FAF7F2;      /* avorio sopra il ruggine: 4.85:1 */
  /* Stati: il marchio non li definisce (grafica_evoxa.md §6), scelti caldi e sobri. */
  --colore-successo: #3F6A2B;         /* oliva */
  --colore-attenzione: #8A5A00;       /* ocra */
  --colore-errore: #A3231A;           /* rosso mattone */

  /* Tipografia: solo Sora (titoli 700, testo 400-600), JetBrains Mono per etichette e cifre. */
  --font-titoli: 'Sora', system-ui, 'Segoe UI', sans-serif;
  --font-testo: 'Sora', system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --testo-s: 0.8125rem;
  --testo-m: 0.9375rem;
  --testo-l: 1.125rem;
  --testo-xl: 1.375rem;
  --testo-2xl: 1.625rem;
  --interlinea: 1.5;

  /* Spaziature su base 4px. */
  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 0.75rem;
  --spazio-4: 1rem;
  --spazio-5: 1.5rem;
  --spazio-6: 2.5rem;

  /* Forma e profondità: bordo sottile, niente ombre sulle card. */
  --raggio: 8px;
  --ombra: none;

  --larghezza-testo: 68ch;
  --larghezza-max: 80rem;

  /* Composizione (21.09.2026): barra laterale a icone sopra i 900px, bruno solo su barra e testata. */
  --colore-primario-tenue: #FBF1EB;   /* velo ruggine sotto la voce attiva: ruggine sopra 4.66:1 */
  --font-hero-home: clamp(2rem, 3.6vw, 3rem);   /* la frase dell'assistente in testa alla home (PLAN-3.17) */
  --rail-w: 72px;                     /* larghezza della barra laterale (sopra i 900px) */
  --rail-hover: #2A231E;              /* voce della barra su bruno al passaggio e attiva */
  --rail-linea: rgba(250, 247, 242, .12);  /* separatori su bruno */

  /* In campo (docs/PIANO_MOBILE.md §4.1, lotto 1, 19.10.2026): le TRE soglie del portale.
     Una variabile CSS non vale dentro una @media, quindi questi tre valori sono un contratto:
     le @media di app.css scrivono gli stessi numeri (640 / 900 / 1180, e la variante .02 per
     il «min-width» del contrario, v54.2 in portale-comune.md) e tools/verifica-mobile.mjs
     fallisce se ne compare un altro. Il JS li legge da qui (matchMedia in common.js) invece
     di scriverli a mano. */
  --bp-telefono: 640px;               /* fino a 640: telefono in verticale (e iPhone in orizzontale no: e' tablet) */
  --bp-tablet: 900px;                 /* fino a 900: tablet in verticale; sopra, la colonna di icone */
  --bp-largo: 1180px;                 /* fino a 1180: desktop stretto (portatile con scalatura Windows) */
  --testo-campo: 1rem;                /* 16px: sotto, iOS Safari fa zoom al focus di un campo */
  --tocco: 44px;                      /* lato minimo di un bersaglio col dito */
  --tocco-campo: 48px;                /* bersaglio della home dell'evento (come 5.7 e 7.4); --tocco resta il minimo del resto */
  --testo-xs: 0.6875rem;              /* 11px: solo cifre e sigle fitte (testata dei giorni della vista Periodo) */

  /* Colori delle aziende (punto 61, 19.10.2026). ECCEZIONE dichiarata alla palette solo calda,
     scelta di Giacomo: una dozzina di aziende al lavoro insieme non si distingue con 7-8 toni
     caldi, quindi qui (e solo qui) anche toni freddi. Servono soltanto a riconoscere un'azienda
     (barre della vista Periodo, quadratino accanto al nome): mai testo sopra, mai per stati o
     azioni. Ognuno almeno 3:1 sul bianco (elemento grafico, WCAG 1.4.11; il piu' chiaro, salvia,
     3.57:1) e distanza minima fra due toni 21 deltaE. L'ordine conta: un'azienda nuova prende
     il primo libero (lavori.js), quindi i piu' diversi fra loro vengono prima e il ruggine,
     che e' anche il colore delle azioni, per ultimo. Lo store salva
     l'indice 0-11 (0 = --evx-az-1), mai il valore. */
  --evx-az-1: #0F6E78;                /* petrolio */
  --evx-az-2: #5E7A1F;                /* oliva */
  --evx-az-3: #2F5DA8;                /* blu */
  --evx-az-4: #A86F00;                /* ocra */
  --evx-az-5: #7A3E78;                /* prugna */
  --evx-az-6: #2E7D4F;                /* verde */
  --evx-az-7: #5B3FA0;                /* viola */
  --evx-az-8: #6B4423;                /* cacao */
  --evx-az-9: #4A5868;                /* ardesia */
  --evx-az-10: #7D7000;               /* senape */
  --evx-az-11: #6F8F7A;               /* salvia */
  --evx-az-12: #C2410C;               /* ruggine: ultimo apposta, e' anche il colore delle azioni (Giacomo, 19.10.2026) */
}