/* JARVIS · I GETTONI DEL CENTRO DI COMANDO · «LA SEDE IN SEZIONE» (centro di comando, fase 1, 30/10/2026 sera; seconda scelta di Sebastiano
 * sulla pagina di scelta, dopo «Il plastico» chiaro: «versione notte sempre, non mi piacciono le cose chiare»).
 * L'UNICO posto dei colori, dei caratteri, delle misure e dei tempi dell'app. Il mondo: la densità ordinata dei siti giapponesi (tanti moduli a
 * filo, una linguetta rossa per ciò che conta) e la sede dell'azienda vista in sezione (piani = divisioni, stanze = reparti, finestre accese =
 * lavori in corso). SEMPRE SCURO: non c'è una versione chiara.
 * I COLORI HANNO UN MESTIERE SOLO (contratto in .impeccable/surfaces/): rosso = SOLO «aspetta voi» (linguetta, anello); arancio = SOLO il guasto,
 * col triangolo; la luce calda delle finestre = SOLO lavoro in corso; azzurro = Jarvis e le informazioni; retino = ciò che non si osserva.
 * Gli stati non sono mai solo colore: ognuno ha anche il suo segno. Una prova (lib/v2/app/grafica.test.ts) fallisce se un colore è scritto in un
 * altro file, se una pagina prende qualcosa da fuori o se un testo scende sotto i 15 punti sul telefono.
 * I nomi di prima («Ponte di comando»: --oro, --luce, --vetro…; «Plastico»: --carta, --inchiostro, --foglio…) restano come RIMANDI ai valori
 * nuovi in fondo al blocco, così ogni vista resta in piedi mentre si riscrive; il codice nuovo usa solo i nomi nuovi.
 * I caratteri sono nostri (licenza OFL in marchio/caratteri/app/LICENZA.txt), serviti da /caratteri/: niente Google, niente CDN.
 * ANNULLA: git revert del commit (tornano i gettoni del plastico chiaro). */

/* ── il carattere della sede: Zen Kaku Gothic New (una gotica giapponese compatta: tanta informazione, piccola e leggibile) ── */
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/caratteri/zen-kaku-gothic-new-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/caratteri/zen-kaku-gothic-new-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/caratteri/zen-kaku-gothic-new-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* i caratteri di prima: li usano ancora la porta (/entra) e la mappa copiata dalla v1 nel Workflow; escono quando quelle si rifanno */
@font-face { font-family: "Michroma"; src: url("/caratteri/michroma-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/caratteri/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/caratteri/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/caratteri/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/caratteri/ibm-plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/caratteri/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/caratteri/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/caratteri/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ── lo spazio: TOKYO D'INCHIOSTRO (30/10/2026 sera, scelta di Sebastiano fra 6 palette provate sulla schermata vera: «spacca»):
     nero-indaco con una punta di viola, pannelli d'inchiostro, finestre bianco-caldo, Jarvis verde acido, la coda in blu freddo ── */
  --notte: #0b0a18;          /* il fondo della pagina (sotto il cielo) */
  --cielo-alto: #221a46;     /* il cielo in alto */
  --cielo-basso: #05040c;    /* il cielo in basso, verso terra */
  --modulo: #13112a;         /* un pannello */
  --modulo-alto: #1d1a3c;    /* un pannello sotto il puntatore, una riga scelta, un menu aperto */
  --modulo-basso: #0f0d22;   /* le barre e i fondi secondari */
  --filo: #2a2652;           /* i fili tra le cose */
  --filo-2: #3e3878;         /* i fili che si notano (bordi dei campi) */
  --testo-1: #f1f0ff;
  --testo-2: #bdbbe2;        /* contrasto 8:1 sul pannello */
  --testo-3: #8f8cbf;        /* le note: contrasto 5:1 sul pannello */
  /* i colori col mestiere */
  --finestra: #fff1d6;       /* SOLO lavoro in corso: una finestra accesa (la luce calda nella notte blu) */
  --finestra-tenue: #6a6152; /* una finestra che aspetta (in coda): spenta ma c'è */
  --coda: #5d6bd8;           /* la luce FREDDA e fioca del lavoro in coda (sede 3D): si distingue subito dalla luce calda del lavoro in corso */
  --voi: #ff4f73;            /* SOLO «aspetta voi»: la linguetta rossa, l'anello */
  --voi-pieno: #d01c48;      /* lo stesso rosso quando è un fondo con la scritta bianca sopra (contrasto 5,6:1) */
  --guasto: #ffb03b;         /* SOLO l'errore, col triangolo */
  --jarvis: #c4ff5a;         /* Jarvis, le informazioni, i collegamenti, il fuoco della tastiera */
  --attenzione: #e9c860;     /* va, ma qualcosa non torna (col ▲) */
  --sul-rosso: #ffffff;      /* il testo sopra il rosso */
  --sul-chiaro: #0b0a18;     /* il testo sopra la finestra, l'azzurro, l'arancio */
  /* la materia della sede: cemento blu notte, vetro, infissi, terra (la sede 3D li legge da qui, sede/edificio3d.js) */
  --cemento: #18214a;         /* i pilastri e il taglio dei solai */
  --cemento-chiaro: #2f2b5e;  /* il segno del tratteggio del cemento */
  --parete-alta: #121b3a;     /* la parete di fondo di una stanza, in alto */
  --soffitto: #0d1430;
  --pavimento: #0b1128;
  --infisso: #26335f;
  --vetro-buio: #0a1024;      /* un vetro spento */
  --vetro-riflesso: #1c1a3e;  /* il riflesso di un vetro spento */
  --finestra-alta: #fff3d2;   /* il vetro acceso, in alto (più chiaro) */
  --finestra-bassa: #f2c56c;  /* il vetro acceso, in basso */
  --terra: #0c0b14;
  --terra-segno: #252242;

  /* ── i ricavati ── */
  --linea: color-mix(in srgb, var(--testo-1) 9%, transparent);
  --linea-2: color-mix(in srgb, var(--testo-1) 16%, transparent);
  --linea-3: color-mix(in srgb, var(--testo-1) 28%, transparent);
  --voi-velo: color-mix(in srgb, var(--voi) 14%, var(--modulo));
  --guasto-velo: color-mix(in srgb, var(--guasto) 14%, var(--modulo));
  --jarvis-velo: color-mix(in srgb, var(--jarvis) 13%, var(--modulo));
  --finestra-velo: color-mix(in srgb, var(--finestra) 10%, var(--modulo));
  --anello-voi: 0 0 0 2px color-mix(in srgb, var(--voi) 55%, transparent);
  --fuoco: 0 0 0 2px var(--notte), 0 0 0 4px var(--jarvis);
  --ombra-1: 0 1px 2px color-mix(in srgb, #02040c 50%, transparent);
  --ombra-2: 0 10px 24px -10px color-mix(in srgb, #02040c 70%, transparent);
  --ombra-3: 0 24px 56px -18px color-mix(in srgb, #02040c 80%, transparent);
  /* il retino: ciò che non si osserva (un dato che non arriva non è «niente») */
  --retino: repeating-linear-gradient(45deg, color-mix(in srgb, var(--testo-1) 16%, transparent) 0 1.5px, transparent 1.5px 7px);

  /* ── gli stati: sempre col segno e con la parola accanto ── */
  --stato-lavora: var(--finestra);
  --stato-fermo: var(--testo-3);
  --stato-aspetta: var(--testo-3);
  --stato-voi: var(--voi);
  --stato-attenzione: var(--attenzione);
  --stato-errore: var(--guasto);
  --stato-non-so: var(--testo-3);

  /* ── i caratteri ── */
  --f-titoli: "Zen Kaku Gothic New", "Yu Gothic UI", "Segoe UI", Arial, sans-serif;
  --f-testo: "Zen Kaku Gothic New", "Yu Gothic UI", "Segoe UI", Arial, sans-serif;
  --f-numeri: "Zen Kaku Gothic New", "Segoe UI", Arial, sans-serif;   /* con le cifre tabulari (.cifra) */
  --display-peso: 700;
  --display-spazio: .01em;
  --display-maiuscolo: none;
  --etichetta-spazio: .04em;

  /* ── la scala del testo: densa al computer (passo ≈1,12); sul telefono nessuna voce sotto i 15 punti (in fondo) ── */
  --t-minimo: 12px;
  --t-piccolo: 12.5px;
  --t-base: 14px;
  --t-medio: 15.5px;
  --t-titolo: 18px;
  --t-grande: 22px;
  --t-numero: 26px;
  --t-enorme: 52px;
  --t-sigla: 12px;
  --t-small: var(--t-piccolo);

  /* ── misure: moduli a filo, spazi stretti ma regolari ── */
  --barra-h: 40px;          /* la riga d'informazione in alto */
  --nav-h: 46px;            /* la riga delle aree */
  --tab-h: 64px;
  --menu-l: 0px;
  --jarvis-h: 68px;
  --taglio: 0px;
  --staffa-l: 0px;
  --griglia: 56px;
  --tocco: 40px;            /* al computer; sul telefono 44 (in fondo) */
  --raggio-1: 6px;          /* (blu notte) angoli morbidi: 6 i segni piccoli, 10 i tasti, 14 i pannelli, 18 i pannelli grandi */
  --raggio-2: 10px;
  --raggio-3: 14px;
  --raggio-4: 18px;
  --raggio-pillola: 999px;
  --spazio-1: 4px;
  --spazio-2: 6px;
  --spazio-3: 8px;
  --spazio-4: 10px;
  --spazio-5: 14px;
  --spazio-6: 18px;
  --spazio-7: 28px;
  --margine: 14px;          /* (blu notte) più aria fra i pannelli: ordine prima della densità */
  --colonna-max: 100%;
  --scheda-l: 440px;
  --attese-l: 330px;
  --numeri-l: 310px;

  /* ── tempi del movimento: brevi; una stanza si accende in 360 ms, nient'altro si muove da solo ── */
  --tempo-1: 100ms;
  --tempo-2: 160ms;
  --tempo-3: 420ms;
  --tempo-4: 760ms;
  --curva: cubic-bezier(.16, 1, .3, 1);

  /* ── piani ── */
  --piano-barra: 30;
  --piano-tab: 40;
  --piano-scheda: 60;
  --piano-velo: 55;
  --piano-avviso: 80;

  --fondo-pagina: linear-gradient(180deg, var(--cielo-alto) 0%, var(--notte) 42%, var(--cielo-basso) 100%) fixed, var(--notte);
  --ombra-scheda: var(--ombra-3);

  /* ── RIMANDI: i nomi del «Plastico» (30/10 pomeriggio) ── */
  --carta: var(--notte);
  --carta-2: var(--modulo-basso);
  --carta-chiara: var(--modulo-basso);
  --foglio: var(--modulo);
  --inchiostro: var(--testo-1);
  --inchiostro-2: var(--testo-2);
  --inchiostro-3: var(--testo-3);
  --curva-livello: var(--filo-2);
  --alt-1: var(--modulo-alto);
  --alt-2: var(--finestra-tenue);
  --alt-3: color-mix(in srgb, var(--finestra) 60%, var(--modulo));
  --alt-4: var(--finestra);
  --acqua: var(--jarvis);
  --morello: var(--guasto);
  --bosco: var(--finestra);
  --ocra: var(--attenzione);
  --sul-scuro: var(--sul-chiaro);
  --acqua-velo: var(--jarvis-velo);
  --morello-velo: var(--guasto-velo);
  --ocra-velo: color-mix(in srgb, var(--attenzione) 14%, var(--modulo));
  --bosco-velo: var(--finestra-velo);
  --scelto: var(--modulo-alto);

  /* ── RIMANDI: i nomi del «Ponte di comando» (24/10) ── */
  --fondo: var(--notte);
  --luce: var(--testo-1);
  --testo: var(--testo-1);
  --oro: var(--testo-1);                /* il tasto principale: chiaro sul fondo scuro (il rosso è solo per «voi») */
  --oro-2: color-mix(in srgb, var(--testo-1) 40%, transparent);
  --oro-velo: color-mix(in srgb, var(--testo-1) 6%, transparent);
  --oro-chiaro: var(--testo-1);
  --sul-oro: var(--notte);
  --lavora: var(--finestra);
  --aspetta: var(--jarvis);
  --errore: var(--guasto);
  --vetro: var(--modulo);
  --vetro-2: var(--modulo-alto);
  --vetro-3: var(--modulo-alto);
  --vetro-bordo: var(--filo);
  --vetro-bordo-2: var(--filo-2);
  --velo: color-mix(in srgb, #000000 62%, transparent);
  --barra-fondo: color-mix(in srgb, var(--modulo-basso) 96%, transparent);
  --staffa: var(--filo-2);
  --hud-2: var(--linea-3);
  --hud-3: var(--linea);
  --bagliore-oro: var(--ombra-1);
  --nucleo-cuore-a: var(--modulo-alto);
  --nucleo-cuore-b: var(--finestra);
  --nucleo-cuore-c: var(--finestra-tenue);
  --nucleo-bordo: var(--filo-2);
  --nucleo-anelli-a: var(--jarvis);
  --nucleo-anelli-b: var(--filo-2);
  --nucleo-particelle: var(--finestra);
  --nucleo-cifre: var(--testo-1);
  --nucleo-hud: var(--testo-2);
  --nucleo-logo: var(--testo-1);
  --nucleo-alone: var(--finestra-tenue);
}

/* il telefono: nessun testo sotto i 15 punti, tasti da 44 */
@media (max-width: 759px) {
  :root {
    --t-minimo: 15px;
    --t-piccolo: 15px;
    --t-base: 16px;
    --t-medio: 17px;
    --t-titolo: 18.5px;
    --t-grande: 22px;
    --t-numero: 26px;
    --t-enorme: 48px;
    --t-sigla: 15px;
    --tocco: 44px;
    --scheda-l: 100%;
    --attese-l: 100%;
    --numeri-l: 100%;
    --margine: 12px;
  }
}

/* ───────────── LA PORTA (/entra): per ora la grafica della pagina d'accesso della v1 (si rifà nella fase 1 del centro di comando) ─────────────
 * (26/10/2026 sera, Raniero: «da jarvis.v1 dovevi prendere solo la grafica della pagina di accesso della passkey e il pin!»). Valgono SOLO sulla
 * pagina d'accesso (<html class="porta-v1">, entra/index.html), con i tasti degli stili A-E in fondo alla porta. */
@font-face { font-family: "Orbitron"; src: url("/caratteri/orbitron-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/caratteri/hanken-grotesk-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/caratteri/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root.porta-v1 {
  color-scheme: dark;
  --fondo: #05060d; --luce: #edeefa; --oro: #7fe9ff; --lavora: #3dff9a; --errore: #ff3b5c; --viola: #b46bff;
  --testo-2: #a7accd; --testo-3: #6c7296;
  --vetro: color-mix(in srgb, #0a0e1e 80%, transparent);
  --linea: color-mix(in srgb, #a0aaff 12%, transparent);
  --linea-2: color-mix(in srgb, #a0aaff 22%, transparent);
  --testo: var(--luce);
  --vetro-bordo: color-mix(in srgb, var(--oro) 22%, transparent);
  --vetro-bordo-2: color-mix(in srgb, var(--oro) 45%, transparent);
  --hud-2: color-mix(in srgb, var(--oro) 55%, transparent);
  --hud-3: color-mix(in srgb, var(--oro) 18%, transparent);
  --sul-oro: var(--fondo);
  --stato-lavora: var(--lavora);
  --stato-errore: var(--errore);
  --nucleo-particelle: color-mix(in srgb, var(--oro) 25%, var(--luce));
  --nucleo-hud: var(--oro);
  --f-titoli: "Orbitron", "Michroma", "Arial Black", sans-serif;
  --f-testo: "Hanken Grotesk", "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-numeri: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --display-peso: 700; --display-spazio: .12em; --display-maiuscolo: uppercase;
  --raggio-2: 10px; --raggio-4: 20px;
  --fondo-pagina: var(--fondo);
  --ombra-scheda: 0 30px 80px color-mix(in srgb, var(--fondo) 70%, transparent);
  --curva: cubic-bezier(.2, .8, .2, 1);
}
:root.porta-v1[data-stile="orbita"] {
  --fondo: #0a0908; --luce: #f6f1ea; --testo-2: #c3b7a6; --testo-3: #7f766b; --oro: #ffc46b; --viola: #ff7a3d;
  --vetro: color-mix(in srgb, #16120e 80%, transparent); --linea: color-mix(in srgb, #ffdcb4 10%, transparent); --linea-2: color-mix(in srgb, #ffdcb4 20%, transparent);
  --f-titoli: "Michroma", "Arial Black", sans-serif; --f-testo: "IBM Plex Sans", system-ui, sans-serif; --f-numeri: "IBM Plex Mono", ui-monospace, monospace;
  --display-peso: 400; --display-spazio: .08em;
}
:root.porta-v1[data-stile="aurora"] {
  --fondo: #0b1120; --luce: #f8f7f4; --testo-2: #b9bfd0; --testo-3: #7a8299; --oro: #c9ae7a; --viola: #7fb4ff;
  --vetro: color-mix(in srgb, #121a2e 80%, transparent); --linea: color-mix(in srgb, #c9ae7a 12%, transparent); --linea-2: color-mix(in srgb, #c9ae7a 24%, transparent);
  --f-titoli: Georgia, "Times New Roman", serif; --f-testo: "Hanken Grotesk", system-ui, sans-serif;
  --display-peso: 600; --display-spazio: .02em; --display-maiuscolo: none;
}
:root.porta-v1[data-stile="controllo"] {
  --fondo: #000000; --luce: #f6f1e9; --testo-2: #bfb8ad; --testo-3: #918b81; --oro: #ff7a1a; --viola: #ffa24d;
  --vetro: color-mix(in srgb, #0c0c0c 82%, transparent); --linea: color-mix(in srgb, #fff4e8 10%, transparent); --linea-2: color-mix(in srgb, #fff4e8 20%, transparent);
  --f-titoli: "Michroma", "Orbitron", sans-serif; --f-testo: "IBM Plex Sans", system-ui, sans-serif; --f-numeri: "IBM Plex Mono", ui-monospace, monospace;
  --display-peso: 400; --display-spazio: .14em;
}
:root.porta-v1[data-stile="abisso"] {
  --fondo: #030711; --luce: #e9f5ff; --testo-2: #a3bdd6; --testo-3: #7391ad; --oro: #19e6ff; --viola: #4a8dff;
  --vetro: color-mix(in srgb, #060e20 80%, transparent); --linea: color-mix(in srgb, #8cd7ff 10%, transparent); --linea-2: color-mix(in srgb, #8cd7ff 20%, transparent);
  --display-spazio: .1em;
}

/* ───────────── LA SEZIONE CLIENTI (v2/viste/clienti/): i colori della vista Clienti, passati alla sede ─────────────
 * Valgono solo dentro la vista Clienti (.cl-pagina) e nella scheda del filo (.cl-filo); la vista si rifà nella fase 6 del centro di comando. */
.cl-pagina, .cl-filo {
  --cl-ink: var(--testo-1);
  --cl-ink2: var(--testo-2);
  --cl-ink3: var(--testo-3);
  --cl-tinta: var(--jarvis);
  --cl-line: var(--linea);
  --cl-line2: var(--linea-2);
  --cl-carta: var(--modulo);
  --cl-fondo: var(--modulo-basso);
  --cl-carta-2: var(--modulo-alto);
  --cl-bolla: var(--modulo-alto);
  --cl-colonna: var(--modulo-basso);
  --cl-scambio-fondo: var(--modulo-basso);
  --cl-piede: var(--modulo-basso);
  --cl-av-fondo: var(--modulo-alto);
  --cl-sul-pieno: var(--sul-chiaro);
  --cl-sul-pieno-2: var(--testo-2);
  --cl-voi: var(--voi);
  --cl-sis: var(--jarvis);
  --cl-loro: var(--finestra);
  --cl-spento: var(--testo-3);
  --cl-rosso: var(--guasto);
  --cl-verde: var(--finestra);
  --cl-giallo: var(--attenzione);
  --cl-arancione: var(--guasto);
  --cl-avviso: color-mix(in srgb, var(--attenzione) 14%, var(--modulo));
  --cl-err: var(--guasto-velo);
  --cl-sugg: color-mix(in srgb, var(--attenzione) 14%, var(--modulo));
  --cl-chiam: var(--jarvis-velo);
  --cl-sul-chiam: var(--jarvis);
}