/* Wakelist, interfaccia web: i token. L'UNICO file dove stanno colori, taglie, raggi, ombre e font
   (docs/wakelist/UI-REGOLE.md; prove/ui-regole.prova.js boccia ogni valore scritto altrove).
   Grigi caldi (pietra) + un solo accento (il verde Wakelist delle pagine di vendita). Rosso, giallo e verde di stato
   solo per stati veri. Il tema scuro usa gli stessi nomi: nessun componente sceglie un colore da solo. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../font/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* 5 taglie, non di piu' */
  --t-1: 12px;  /* note, intestazioni di tabella */
  --t-2: 14px;  /* testo */
  --t-3: 16px;  /* titoli di sezione, testo su telefono nei campi */
  --t-4: 20px;  /* titolo della pagina */
  --t-5: 28px;  /* numeri grandi della panoramica */
  --peso-normale: 400; --peso-medio: 500; --peso-forte: 600;

  /* spazi: multipli di 4 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* raggi piccoli */
  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-tondo: 999px;

  /* superfici e testo: grigi caldi */
  --fondo: #fafaf9;
  --superficie: #ffffff;
  --superficie-2: #f5f5f4;
  --superficie-3: #ecebe9;
  --linea: #e7e5e4;
  --linea-forte: #d6d3d1;
  --testo: #1c1917;
  --testo-2: #57534e;
  --testo-3: #736c67;       /* = --ink-400 delle pagine di vendita (un solo prodotto); mai su --superficie-3 (4,33:1) */
  --sul-pieno: #fafaf9;       /* testo sopra il bottone principale */
  --pieno: #1c1917;           /* bottone principale: inchiostro, come Cal.com e Linear */
  --pieno-sopra: #3a3633;

  /* l'unico accento */
  --accento: #0b6e55;
  --accento-tenue: #e8f2ee;
  --accento-linea: #b9dccd;

  /* stati veri */
  --ok: #1d7a46;       --ok-tenue: #eaf5ee;
  --attesa: #8a5300;   --attesa-tenue: #fdf3e1;
  --rischio: #b42318;  --rischio-tenue: #fef1f0;

  /* ombre leggere */
  --ombra-1: 0 1px 2px rgba(28, 25, 23, 0.05);
  --ombra-2: 0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 24px -8px rgba(28, 25, 23, 0.14);
  --velo: rgba(28, 25, 23, 0.32);
  /* focus da tastiera: anello pieno di 2 px staccato di 2 px (outline), 3:1 su ogni fondo (WCAG 1.4.11; fase 3) */
  --anello: #0b6e55;

  /* marchio WakeList (logo approvato il 12/11, disegno in js/marchio.js): quattro colori fissi, uguali nei due temi
     (tessera dell'icona: inchiostro, carta e menta). --segno-1/2 = le due spunte sul fondo della pagina: inchiostro e
     verde su chiaro, carta e menta nel tema scuro. I generatori Node (icone, pagine di vendita) leggono questi valori. */
  --marchio-inchiostro: #1c1917; --marchio-carta: #fafaf9; --marchio-verde: #0b6e55; --marchio-menta: #4cc29a;
  --segno-1: var(--marchio-inchiostro); --segno-2: var(--marchio-verde);
}

:root[data-tema="scuro"] {
  color-scheme: dark;
  --fondo: #151412;
  --superficie: #1c1a18;
  --superficie-2: #23211e;
  --superficie-3: #2c2926;
  --linea: #2f2c29;
  --linea-forte: #3f3b37;
  --testo: #f2f1ef;
  --testo-2: #c2bdb7;
  --testo-3: #9a938d;
  --sul-pieno: #1c1917;
  --pieno: #f2f1ef;
  --pieno-sopra: #d9d6d2;

  --accento: #4cc29a;
  --accento-tenue: #18302a;
  --accento-linea: #2a5446;

  --ok: #5bc48a;       --ok-tenue: #17291e;
  --attesa: #e5b25c;   --attesa-tenue: #2e2414;
  --rischio: #f2877d;  --rischio-tenue: #331b19;

  --ombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ombra-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --velo: rgba(0, 0, 0, 0.5);
  --anello: #4cc29a;
  --segno-1: var(--marchio-carta); --segno-2: var(--marchio-menta);
}