/* tokens.css — i token del sistema di design (fonte: MASTER.md, approvato il 5/10/2026) + font + base.
   Colori come triplette RGB: si usano con rgb(var(--c-x)) oppure rgb(var(--c-x) / .1).
   Tema chiaro di default; scuro se il sistema lo chiede o con data-theme="dark", che vale anche su un singolo
   contenitore (le variabili si ereditano dal contenitore più vicino). File pubblico: lo usa anche il login. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/roboto-condensed-latin.woff2) format('woff2');
}

/* ===== Tema chiaro (default) ===== */
:root, [data-theme="light"] {
  --c-bg: 245 246 248;            /* #F5F6F8 */
  --c-surface: 255 255 255;       /* #FFFFFF */
  --c-surface2: 240 242 246;      /* #F0F2F6 */
  --c-line: 222 226 233;          /* #DEE2E9 separatori */
  --c-line-strong: 140 149 163;   /* #8C95A3 bordi di campi e spunte, 3,0:1 */
  --c-txt: 24 29 38;              /* #181D26 16,9:1 */
  --c-muted: 83 91 105;           /* #535B69 6,8:1 */
  --c-faint: 100 108 123;         /* #646C7B 5,3:1 */
  --c-accent: 24 64 126;          /* #18407E blu HM, 10,1:1 */
  --c-accent-hover: 34 84 158;    /* #22549E */
  --c-on-accent: 255 255 255;
  --c-signal: 246 168 65;         /* #F6A841 arancio HM: solo come fondo */
  --c-on-signal: 48 30 4;         /* #301E04 8,1:1 sull'arancio */
  --c-ok: 18 115 63;              /* #12733F */
  --c-warn: 154 87 0;             /* #9A5700 */
  --c-bad: 190 40 58;             /* #BE283A */
  --c-bad-sel: 190 40 58;         /* #BE283A rosso sulle righe selezionate (fondo --sel): 4,98:1 */
  /* famiglie degli stati delle trattative (lib/dominio.js → STATO[id].famiglia) */
  --c-st-nuovo: 125 134 150;      /* #7D8696 */
  --c-st-contatto: 100 116 139;   /* #64748B */
  --c-st-interesse: 15 127 134;   /* #0F7F86 */
  --c-st-trattativa: 24 64 126;   /* #18407E */
  --c-st-cliente: 18 115 63;      /* #12733F */
  --c-st-chiusa: 176 74 90;       /* #B04A5A */
  /* toast e barra di selezione: sempre su fondo scuro (l'azione «Annulla» è arancio, ≥ 6:1) */
  --c-toast-bg: 24 29 38;         /* #181D26 */
  --c-toast-txt: 255 255 255;
  --c-toast-ok: 74 200 130;       /* #4AC882 */
  --c-toast-bad: 240 100 115;     /* #F06473 */
  /* velo dietro a drawer, finestre e fogli: colore e quanto copre (separati: servono anche per la fascia della barra di
     scorrimento, app.css §9, che lo ricompone in un colore pieno) */
  --c-velo: 10 14 22;             /* #0A0E16 */
  --a-velo: 32%;
  /* composti: vanno ridichiarati in ogni tema (una variabile si risolve dove è dichiarata) */
  --velo: rgb(24 64 126 / .055);
  --sel: rgb(24 64 126 / .10);
  --ring: rgb(24 64 126 / .55);
  --fondo-velo: rgb(var(--c-velo) / var(--a-velo));
  --om-galleggia: 0 1px 2px rgb(16 24 40 / .06), 0 10px 28px -10px rgb(16 24 40 / .22);
  --om-drawer: -18px 0 44px -18px rgb(16 24 40 / .32);
  --logo-chiaro: inline-block;
  --logo-scuro: none;
  color-scheme: light;
}

/* ===== Tema scuro ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: 17 19 23;               /* #111317 */
    --c-surface: 24 27 32;          /* #181B20 */
    --c-surface2: 31 35 41;         /* #1F2329 */
    --c-line: 45 50 58;             /* #2D323A */
    --c-line-strong: 99 106 120;    /* #636A78 3,1:1 */
    --c-txt: 233 234 236;           /* #E9EAEC */
    --c-muted: 165 170 178;         /* #A5AAB2 */
    --c-faint: 139 145 155;         /* #8B919B */
    --c-accent: 128 166 226;        /* #80A6E2 */
    --c-accent-hover: 156 188 238;  /* #9CBCEE */
    --c-on-accent: 10 22 44;        /* #0A162C */
    --c-signal: 246 168 65;
    --c-on-signal: 48 30 4;
    --c-ok: 74 200 130;             /* #4AC882 */
    --c-warn: 240 170 70;           /* #F0AA46 */
    --c-bad: 240 100 115;           /* #F06473 */
    --c-bad-sel: 243 110 124;       /* #F36E7C sulle righe selezionate: 4,7:1 (--c-bad lì fa 4,38) */
    --c-st-nuovo: 124 132 147;      /* #7C8493 */
    --c-st-contatto: 140 154 176;   /* #8C9AB0 */
    --c-st-interesse: 63 191 196;   /* #3FBFC4 */
    --c-st-trattativa: 128 166 226; /* #80A6E2 */
    --c-st-cliente: 74 200 130;     /* #4AC882 */
    --c-st-chiusa: 224 122 136;     /* #E07A88 */
    --c-toast-bg: 45 50 58;         /* #2D323A */
    --c-toast-txt: 233 234 236;
    --c-toast-ok: 74 200 130;
    --c-toast-bad: 240 100 115;
    --c-velo: 0 0 0;
    --a-velo: 50%;
    --velo: rgb(128 166 226 / .07);
    --sel: rgb(128 166 226 / .14);
    --ring: rgb(128 166 226 / .65);
    --fondo-velo: rgb(var(--c-velo) / var(--a-velo));
    --om-galleggia: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .75);
    --om-drawer: -18px 0 48px -18px rgb(0 0 0 / .8);
    --logo-chiaro: none;
    --logo-scuro: inline-block;
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --c-bg: 17 19 23;
  --c-surface: 24 27 32;
  --c-surface2: 31 35 41;
  --c-line: 45 50 58;
  --c-line-strong: 99 106 120;
  --c-txt: 233 234 236;
  --c-muted: 165 170 178;
  --c-faint: 139 145 155;
  --c-accent: 128 166 226;
  --c-accent-hover: 156 188 238;
  --c-on-accent: 10 22 44;
  --c-signal: 246 168 65;
  --c-on-signal: 48 30 4;
  --c-ok: 74 200 130;
  --c-warn: 240 170 70;
  --c-bad: 240 100 115;
  --c-bad-sel: 243 110 124;
  --c-st-nuovo: 124 132 147;
  --c-st-contatto: 140 154 176;
  --c-st-interesse: 63 191 196;
  --c-st-trattativa: 128 166 226;
  --c-st-cliente: 74 200 130;
  --c-st-chiusa: 224 122 136;
  --c-toast-bg: 45 50 58;
  --c-toast-txt: 233 234 236;
  --c-toast-ok: 74 200 130;
  --c-toast-bad: 240 100 115;
  --c-velo: 0 0 0;
  --a-velo: 50%;
  --velo: rgb(128 166 226 / .07);
  --sel: rgb(128 166 226 / .14);
  --ring: rgb(128 166 226 / .65);
  --fondo-velo: rgb(var(--c-velo) / var(--a-velo));
  --om-galleggia: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .75);
  --om-drawer: -18px 0 48px -18px rgb(0 0 0 / .8);
  --logo-chiaro: none;
  --logo-scuro: inline-block;
  color-scheme: dark;
}

/* ===== Token indipendenti dal tema ===== */
:root {
  --f-ui: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-cond: 'Roboto Condensed', 'Arial Narrow', ui-sans-serif, sans-serif;
  --fs-micro: 12px;
  --fs-tab: 13px;
  --fs-testo: 14px;
  --fs-campo: 13px;
  --fs-titolo2: 20px;
  --fs-titolo: 24px;
  --fs-kpi: 28px;
  --fs-kpi-tel: 24px;   /* numeri dei contatori sul telefono (MASTER §3) */

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  --r-campo: 6px;
  --r-pannello: 10px;
  --r-pill: 999px;

  --h-campo: 32px;
  --h-piccolo: 28px;
  --h-riga: 36px;
  --h-testa: 32px;
  --h-touch: 44px;
  --h-barra-alta: 52px;      /* barra in alto del telefono: altezza minima, safe area compresa (con la tacca cresce) */
  --h-barra-sezioni: 60px;   /* barra delle sezioni del telefono, senza la safe area (che le si aggiunge sotto) */

  --w-nav: 216px;
  --w-drawer: 600px;
  --w-modale: 640px;
  --w-modulo: 720px;

  --z-fisso: 10; --z-barre: 20; --z-menu: 30; --z-velo: 40; --z-drawer: 50; --z-modale: 60; --z-dialogo: 65; --z-toast: 70;

  --t-hover: 120ms;
  --t-menu: 180ms;
  --t-drawer: 220ms;
  --t-uscita: 140ms;
  --t-pronto: 400ms;   /* un sovrapposto appena aperto ignora il puntatore (il 2° clic di un doppio clic) */
  --e-in: cubic-bezier(.2, .8, .2, 1);
  --e-out: cubic-bezier(.4, 0, 1, 1);
}

/* Sotto 1024 px (l'unico punto di rottura): tutto si tocca col dito e i campi non fanno zoomare iOS. */
@media (max-width: 1023.98px) {
  :root {
    --h-campo: 44px;
    --h-piccolo: 36px;
    --fs-campo: 16px;
    --fs-titolo: 20px;
  }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  font-family: var(--f-ui);
  font-size: var(--fs-testo);
  line-height: 1.45;
  color: rgb(var(--c-txt));
  background: rgb(var(--c-bg));
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11';
}
[data-theme] { color: rgb(var(--c-txt)); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Logo: variante chiara o scura secondo il tema del contenitore più vicino. */
.logo-chiaro { display: var(--logo-chiaro); }
.logo-scuro { display: var(--logo-scuro); }