/* VAIdesk · i gettoni del disegno: colori, caratteri, misure, tempi.
 *
 * Il colore del cliente sta nelle tre variabili --cliente-*: tutti i bianchi
 * e i grigi della faccia di VAIdesk si tingono appena verso quel colore, così
 * per un cliente nuovo basta cambiarle (lo fa da sola js/cliente.js).
 */
:root {
  color-scheme: light;

  /* Il colore del cliente. Qui il cotto dei pulsanti del sito d'esempio. */
  --cliente-l: 54%;
  --cliente-c: 0.15;
  --cliente-h: 40;

  /* Faccia di VAIdesk: uguale per tutti, tinta appena verso il cliente */
  --color-paper:   oklch(98.6% 0.005 var(--cliente-h));   /* schede e fogli */
  --color-paper-2: oklch(96.3% 0.009 var(--cliente-h));   /* fondo */
  --color-paper-3: oklch(93.2% 0.012 var(--cliente-h));   /* fondi leggeri, tracce */
  --color-rule:    oklch(87.5% 0.011 var(--cliente-h));
  --color-rule-2:  oklch(91.5% 0.009 var(--cliente-h));
  --color-muted:   oklch(49% 0.013 var(--cliente-h));
  --color-ink-2:   oklch(39% 0.013 var(--cliente-h));
  --color-ink:     oklch(23% 0.013 var(--cliente-h));

  --color-accent:       oklch(var(--cliente-l) var(--cliente-c) var(--cliente-h));
  --color-accent-hover: oklch(calc(var(--cliente-l) - 6%) var(--cliente-c) var(--cliente-h));
  --color-accent-soft:  oklch(94.2% 0.032 var(--cliente-h));
  --color-accent-soft-2: oklch(90.5% 0.045 var(--cliente-h));
  --color-accent-track: oklch(86.5% 0.05 var(--cliente-h));
  --color-accent-ink:   oklch(98.6% 0.005 var(--cliente-h));
  --color-focus:        oklch(calc(var(--cliente-l) - 4%) 0.19 var(--cliente-h));

  /* La guida del giro: scura, per staccarsi dalle schede bianche */
  --color-coach:     oklch(27% 0.022 var(--cliente-h));
  --color-coach-ink: oklch(96.5% 0.008 var(--cliente-h));
  --color-coach-2:   oklch(80% 0.014 var(--cliente-h));

  /* Stati che hanno un significato: sempre con icona e parola accanto */
  --color-ok:      oklch(50% 0.11 150);
  --color-ok-soft: oklch(94.5% 0.035 150);
  --color-error:   oklch(52% 0.18 27);

  /* Il marchio VAIdesk, con i colori del logo VAImarket */
  --color-vai-viola: oklch(46% 0.19 305);
  --color-vai-blu:   oklch(41.96% 0.2771 266.49);

  /* Il giro guidato (07/10/2026): il blu di VAImarket, che nell'app non c'è, così il punto da toccare
     non si confonde con i pulsanti del colore del cliente. Se un giorno il cliente fosse blu, va cambiato. */
  --color-giro:       var(--color-vai-blu);
  --color-giro-ink:   oklch(98.6% 0.005 266.5);
  --color-giro-luce:  oklch(74% 0.15 266.5);   /* l'anello sulla guida scura */
  --color-giro-tinta: oklch(94.5% 0.04 266.5); /* fondo di una carta da toccare */
  --color-giro-alone: oklch(41.96% 0.2771 266.49 / 0.3);
  --color-giro-velo:  oklch(23% 0.013 var(--cliente-h) / 0.45); /* abbassa quello che il tocco non cambia */

  /* Ombre: una sola per elemento */
  --shadow-soft: 0 14px 34px -22px oklch(28% 0.04 var(--cliente-h) / 0.32);
  --shadow-sheet: 0 -18px 50px -30px oklch(28% 0.04 var(--cliente-h) / 0.38);
  --shadow-app: 0 40px 90px -50px oklch(28% 0.05 var(--cliente-h) / 0.45);
  --color-velo: oklch(23% 0.013 var(--cliente-h) / 0.38);

  /* Caratteri */
  --font-display: "Fraunces VAIdesk", ui-serif, Georgia, serif;
  --font-body: "Geist VAIdesk", ui-sans-serif, "Segoe UI", system-ui, sans-serif;

  /* Cinque misure di testo */
  --text-sm:   0.875rem;   /* 14 px: etichette, chip, dettagli */
  --text-base: 1rem;       /* 16 px: testo e pulsanti */
  --text-md:   1.1875rem;  /* 19 px: nomi e titoli di sezione */
  --text-xl:   1.875rem;   /* 30 px: titoli di pagina e cifre dei riquadri */
  --text-hero: 3rem;       /* 48 px: la cifra principale di ogni pagina */

  /* Spazi, scala da 4 px */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Angoli morbidi */
  --radius-sm:   0.75rem;
  --radius-md:   1.125rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-pill: 999px;

  /* Movimento */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Livelli */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* Misure fisse dell'interfaccia */
  --tocco: 2.75rem;        /* 44 px, il minimo per il pollice */
  --schede-h: 4.25rem;     /* barra dei tre posti */
}