/* ==========================================================================
   tokens.css — design token canonici iza.ai (BUILD-SPEC §8.1, fonte unica)

   Iterazione 4 (2026-09-03, T-DASH freeze G-DASH): token round-2 portati dal
   prototipo congelato prototypes/template-dashboard — pill scura nav, lane
   tabella, motion expo/pulse/count.

   Stile globale: SOFT CARDS — decisione B0 del 2026-08-31
   (galleria prototypes/style-gallery, realizzazione v4-kimi-tui; verifica
   Browser Use 31/08: desktop 1280 / mobile 360 / wizard / stati / modale /
   scansione grayscale — tutto PASS, solo colori semantici fuori scala grigi)

   Iterazione 2 (2026-09-01): porting 1:1 di a-g5-production
   (prototypes/style-gallery-iter2), mappatura "letterale" ratificata —
   scala type estesa (h1–h3, micro, hero, line-height, measure), token motion
   completi (press/side/shimmer/toast/spin, spring, reveal), focus ring
   tokenizzato, sidebar collassabile (--side-w-rail), --wrap. Ladder ombre
   invariata (--sh-1/2/3), rampa grayscale e .band-dark invariati.
   Polish G5.1: edge light sulle superfici rialzate (--edge-light[-accent]),
   luce radiale in .band-dark (--glow-band), hover-lift card interattive
   (--dur-lift/--lift-shift), shake campi invalidi (--dur-shake).

   Superfici bianche borderless sollevate da ombre morbide a due strati su
   canvas grigio chiaro, raggio 16px. Friendly, product-feel, Apple-adjacent.
   ========================================================================== */

:root {
  /* — rampa grayscale (canonica §8.1) — */
  --bg:#ffffff;            /* sfondo pagina */
  --bg-deep:#f4f4f5;       /* canvas infossato — in Soft Cards = sfondo app */
  --surface:#fafafa;       /* superficie rialzata */
  --surface-2:#f4f4f5;     /* riempimenti infossati */
  --hairline:#e4e4e7;      /* separatori 1px (pagine marketing; in app le card sono borderless) */
  --text:#0a0a0a;          /* inchiostro primario — 19.0:1 su --bg (AAA) */
  --text-muted:#52525b;    /* inchiostro secondario — 7.5:1 su --bg (AA) */
  --text-faint:#a1a1aa;    /* solo decorativo — 2.9:1, mai per testo essenziale */
  --accent:#0a0a0a;        /* nero pieno = unico accento */
  --accent-ink:#ffffff;    /* inchiostro su accento */

  /* — eccezioni semantiche: solo elementi piccoli (badge, CTA danger, delta) —
       coppie ink/bg verificate ≥ 4.5:1 sul proprio sfondo */
  --success-ink:#166534; --success-bg:#dcfce7;   /* 7.0:1 */
  --warning-ink:#854d0e; --warning-bg:#fef9c3;   /* 7.4:1 */
  --danger-ink:#b91c1c;  --danger-bg:#fee2e2;    /* 5.9:1 */
  --danger-solid:#b91c1c;                        /* ink bianco su di esso: 5.9:1 */

  /* — type — */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* scala tipografica app-shell (iter-2: estesa h1–h3, micro, hero) */
  --fs-micro:11px;         /* micro-label: kicker, header tabella, label di gruppo */
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px;
  --fs-h3:16px;            /* titoli card e sezione */
  --fs-h2:20px;            /* titoli pagina */
  --fs-h1:26px;            /* titoli sezione marketing, nome piano */
  --fs-display:32px;       /* numeri KPI, prezzi, statistiche band (era 24px) */
  --fs-hero:clamp(34px,5vw,52px); /* display marketing (hero) */
  --head-weight:600; --head-tracking:-.015em;   /* default generico titoli */
  --h3-weight:600; --h3-track:-.01em;
  --h2-weight:600; --h2-track:-.02em;
  --h1-weight:700; --h1-track:-.025em;
  --hero-weight:700; --hero-track:-.03em;
  --display-weight:700;    /* peso numeri KPI e prezzi */
  --num-tracking:-.025em;  /* numeri KPI: tracking negativo leggero (era -.02em) */
  /* micro-label (uppercase mono) */
  --micro-font:var(--font-mono); --micro-weight:600; --micro-track:.12em;
  /* line-height per ruolo */
  --lh-head:1.2; --lh-h1:1.15; --lh-display:1.08;
  --lh-body:1.55; --lh-lead:1.55; --lh-micro:1.4;
  --measure:65ch;          /* misura massima testo lungo */

  /* — spacing, base 4px — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* — radius: scala + ruoli —
       EMENDA §8.1 (31/08): la regola "un solo raggio" è superata dalla scelta
       Soft Cards — due raggi d'autore: 16px superfici, 10px controlli. */
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --radius-card:var(--r-lg);   /* card, modali, pannelli */
  --radius-ctl:var(--r-md);    /* input, bottoni, chip */

  /* — shadow (grayscale, diffuse) — */
  --sh-1:0 1px 2px rgb(0 0 0/.05);
  --sh-2:0 1px 2px rgb(0 0 0/.04),0 8px 24px -8px rgb(0 0 0/.12);
  --sh-3:0 4px 8px rgb(0 0 0/.05),0 24px 48px -16px rgb(0 0 0/.18);
  /* — edge light (G5.1): bordo superiore "illuminato", composto nelle
       box-shadow delle superfici rialzate — restano borderless — */
  --edge-light:inset 0 1px 0 rgb(255 255 255/.6);         /* superfici chiare */
  --edge-light-accent:inset 0 1px 0 rgb(255 255 255/.18); /* controlli pieni accento */
  /* — luce radiale soft in cima a .band-dark (G5.1) — */
  --glow-band:radial-gradient(60% 80% at 50% 0%,rgb(255 255 255/.05),transparent 70%);

  /* — motion — */
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* overshoot: spunte, knob switch */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);   /* ROUND 2: settle deciso senza overshoot (entrance, rail, toast) */
  --dur-fast:180ms; --dur-med:260ms; --dur-reveal:650ms;
  --dur-press:120ms;       /* feedback :active scale sui bottoni */
  --dur-side:340ms;        /* collapse/expand sidebar */
  --dur-shimmer:1400ms;    /* sweep skeleton */
  --dur-toast:4200ms;      /* vita toast; la progress bar si esaurisce su questo */
  --dur-spin:800ms;        /* giro spinner */
  --dur-lift:200ms;        /* hover-lift card interattive (G5.1) */
  --lift-shift:2px;        /* corsa verticale dell'hover-lift (G5.1) */
  --dur-shake:300ms;       /* shake campo invalido al submit, una volta (G5.1) */
  --dur-pulse:2000ms;      /* ROUND 2: pulse lento del punto di stato "running" */
  --dur-count:480ms;       /* ROUND 2: count-up KPI/balance al load (JS; >400ms dichiarato nel report) */
  --press-scale:.98;       /* fattore scala :active sui bottoni */
  --reveal-stagger:60ms;   /* ritardo reveal per sibling (JS, max 6 step) */
  --reveal-shift:8px;      /* corsa verticale del reveal on-scroll (= --sp-2) */

  /* — focus — */
  --focus-ring-width:2px;
  --focus-ring-offset:2px; /* i controlli possono stringere a 1px */
  --focus-ring-color:var(--text);  /* 19.0:1 su --bg */
  --focus-ring:var(--focus-ring-width) solid var(--focus-ring-color); /* composito */

  /* — layering — */
  --z-sticky:40; --z-modal:90;
}

/* — token componenti app-shell (Soft Cards) —
     origine: knob --v-* della galleria B0 (variante v-soft sui default);
     nomi rinormalizzati — il prefisso v- era macchinario di galleria.
     Override per-app ammessi in scope locale (es. righe tabella più dense)
     senza creare nuove varianti globali. */
:root {
  --app-bg:var(--bg-deep);                 /* canvas app */
  --app-page-pad:24px; --app-sec-gap:24px; --app-gap:16px; /* sec-gap era 20px */
  --wrap:1280px;                           /* wrap contenuto pagina */

  --side-w:232px; --side-w-rail:68px;      /* rail = sidebar collassata a icone */
  --side-bg:var(--bg-deep); --side-pad:16px 12px;
  --nav-pad:8px 10px; --nav-hover-bg:rgb(0 0 0/.045);
  /* ROUND 2 (F2): voce attiva = pill scura piena (fill --accent, ink chiaro,
     ~19.6:1), stile Vercel/Linear — il bordino inset 3px è ritirato. Grayscale. */
  --nav-active-bg:var(--accent); --nav-active-ink:var(--bg);
  --nav-active-shadow:0 1px 2px rgb(0 0 0/.25),0 6px 16px -6px rgb(0 0 0/.25);
  --accent-hover:#26262a; /* hover step di --accent (era lettera inline in shell.css) */

  --table-lane:14px; /* ROUND 2 (F1): corsia sinistra prima colonna tabella —
     la barra inset 3px ci sta dentro e il titolo respira (era 6px) */

  --top-h:58px; --top-bg:var(--bg); --top-shadow:var(--sh-1);

  --card-bg:var(--bg); --card-border:none; --card-shadow:var(--sh-2);
  --card-pad:24px; --card-head-gap:16px; --row-pad:12px; /* pad 22→24, head-gap 14→16 (iter-2) */

  --input-bg:var(--bg); --input-pad:9px 12px;
  --btn-pad:9px 16px; --btn-shadow:var(--sh-1); --ghost-bg:var(--bg);
  --chip-bg:var(--bg);
  --tab-pad:12px 2px; --tab-gap:20px;
}

/* — fascia nera marketing: inverte le variabili in scope (§8.1).
     Serve anche color esplicito: le variabili invertite valgono solo per
     chi dichiara var(--text) in scope — gli elementi che ereditano il
     colore (h2/h3 senza color proprio) resterebbero scuri su scuro. — */
.band-dark {
  --bg:#0a0a0a; --bg-deep:#000000; --surface:#111113; --surface-2:#18181b;
  --hairline:#262626;
  --text:#fafafa; --text-muted:#a1a1aa; --text-faint:#71717a;
  --accent:#ffffff; --accent-ink:#0a0a0a;
  color:var(--text);
}