/* ============================================================================
   DESIGN TOKENS - Blueprint Tecnico
   Fonte di verità dei VALORI (D82). Nomi 1:1 con docs/design/design-tokens.md;
   quel documento resta la doc di razionale/uso. Direzione visiva: ADR-0006.

   Densità (D83): la scala tipografica è ancorata a --root-size via calc().
   La classe di densità sul wrapper di layout (.densita-*) cambia --root-size
   (e contenuto-max / padding); colore, raggi, bordi, ombre restano condivisi.
   ============================================================================ */

:root {
  /* -- 1.1 Neutri (freddi, dominante blu - "carta da blueprint") ----------- */
  --neutral-0:   #FFFFFF;  /* superfici (card, tabelle, modali) */
  --neutral-50:  #F5F7FA;  /* sfondo applicazione */
  --neutral-100: #ECEFF3;  /* righe alternate, hover tenue */
  --neutral-200: #DCE2E9;  /* bordo default (struttura) */
  --neutral-300: #C3CCD6;  /* bordo forte, divisori */
  --neutral-400: #9AA7B5;  /* testo disabilitato, placeholder */
  --neutral-500: #6B7888;  /* testo secondario / meta */
  --neutral-600: #4C5868;  /* icone, label */
  --neutral-700: #33404E;  /* testo corpo (densità interna) */
  --neutral-800: #1F2C3A;  /* titoli */
  --neutral-900: #14202E;  /* testo primario massimo contrasto */

  /* -- 1.2 Primario (blu inchiostro / tecnico) ----------------------------- */
  --primary-50:  #F0F5FD;  /* sfondo selezione tenue */
  --primary-100: #E3EDFA;  /* badge info, riga selezionata */
  --primary-600: #1B5288;  /* hover azioni */
  --primary-700: #14416B;  /* accento brand, bottoni primari, link */
  --primary-900: #0C2A47;  /* testo su sfondi tenui, header scuri */
  --focus:       #1F6FEB;  /* anello di focus (2px) + highlight attivo */

  /* -- 1.3 Semantici (esito · rischio · scadenza) -------------------------- */
  --success:        #1E7D4F;  --success-bg: #E5F4EC;  --success-text: #0B3D26;
  --warning:        #D9A317;  --warning-bg: #FBF3DA;  --warning-text: #6B4E0A;
  --danger:         #D92D20;  --danger-bg:  #FBEAE8;  --danger-text:  #7A1610;
  --info:           #1B5288;  --info-bg:    #E3EDFA;  --info-text:    #0C2A47;
  --status-neutral: #6B7888;  --status-neutral-bg: #ECEFF3;  --status-neutral-text: #33404E;

  /* -- 2. Tipografia ------------------------------------------------------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Ancoraggio densità (D83): default = portale/accesso (16px).
     .densita-backoffice lo riporta a 14px → tutta la scala si ri-ancora. */
  --root-size: 16px;

  /* Scala tipografica: dimensioni = fattore × --root-size (rem-like via calc).
     I px nel commento sono i valori a root 16px. */
  --text-xs:   calc(0.75   * var(--root-size));  /* 12 */
  --text-sm:   calc(0.8125 * var(--root-size));  /* 13 */
  --text-md:   calc(0.875  * var(--root-size));  /* 14 - corpo back-office */
  --text-base: calc(1       * var(--root-size)); /* 16 - corpo fornitore/accesso */
  --text-lg:   calc(1.125  * var(--root-size));  /* 18 */
  --text-xl:   calc(1.25   * var(--root-size));  /* 20 */
  --text-2xl:  calc(1.5    * var(--root-size));  /* 24 */
  --text-3xl:  calc(1.875  * var(--root-size));  /* 30 */
  --text-4xl:  calc(2.25   * var(--root-size));  /* 36 */

  /* Interlinee (rapporti unitless: scalano con la dimensione del passo). */
  --leading-xs:   1.333;
  --leading-sm:   1.385;
  --leading-md:   1.429;
  --leading-base: 1.5;
  --leading-lg:   1.444;
  --leading-xl:   1.4;
  --leading-2xl:  1.333;
  --leading-3xl:  1.267;
  --leading-4xl:  1.222;

  /* -- 3. Spaziatura (griglia 4px, fissa - la densità sceglie il token) ----- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -- 4. Raggi (contenuti - feel tecnico, non "bubbly") ------------------- */
  --radius-sm:   3px;     /* input, badge */
  --radius-md:   6px;     /* bottoni, card */
  --radius-lg:   10px;    /* modali */
  --radius-full: 9999px;  /* avatar / pill di conteggio */

  /* -- 5. Bordi ed elevazione (struttura a bordi, ombre minime) ------------ */
  --border-width:        1px;
  --border-color:        var(--neutral-200);
  --border-color-strong: var(--neutral-300);
  --border-default: var(--border-width) solid var(--border-color);
  --border-strong:  var(--border-width) solid var(--border-color-strong);

  --ring-focus-width:  2px;
  --ring-focus-offset: 2px;
  --ring-focus-color:  var(--focus);

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20, 32, 46, .06);   /* hover sollevato */
  --elev-2: 0 2px 8px rgba(20, 32, 46, .08);   /* dropdown, popover */
  --elev-3: 0 8px 24px rgba(20, 32, 46, .12);  /* modali / overlay */

  /* -- 6. Movimento (no molle/bounce; rispetta prefers-reduced-motion) ----- */
  --motion-fast: 120ms ease-out;  /* hover, focus */
  --motion-base: 200ms ease-out;  /* overlay, espansioni */

  /* -- Densità: larghezza contenuto + padding controlli (default = arioso) - */
  --contenuto-max:  47.5rem;  /* 760px - portale fornitore (centrato) */
  --pad-controllo-y: 10px;    /* padding verticale input/bottoni (arioso) */
  --pad-controllo-x: 14px;
  --pad-riga-y:      12px;    /* righe/celle (arioso) */

  /* -- Superficie scura: rail di navigazione del back-office (D114/ADR-0012) -
     L'unica superficie scura del sistema. Il navy è il primario scuro (--primary-900);
     il testo bianco smorzato via color-mix garantisce il contrasto AA sul navy
     (rail-testo ~10:1, rail-testo-muto ~6:1). L'indicatore della voce attiva usa
     --focus, di cui i token documentano l'uso anche come "highlight attivo". */
  --rail-bg:           var(--primary-900);
  --rail-bordo:        color-mix(in srgb, var(--neutral-0) 12%, var(--primary-900));
  --rail-testo:        color-mix(in srgb, var(--neutral-0) 82%, var(--primary-900));
  --rail-testo-muto:   color-mix(in srgb, var(--neutral-0) 58%, var(--primary-900));
  --rail-hover-bg:     color-mix(in srgb, var(--neutral-0) 8%,  var(--primary-900));
  --rail-attivo-bg:    color-mix(in srgb, var(--neutral-0) 14%, var(--primary-900));
  --rail-attivo-testo: var(--neutral-0);
  --rail-attivo-barra: var(--focus);
}

/* ===========================================================================
   DENSITÀ - un solo sistema, tre contesti (D83). La classe sta sul wrapper
   radice del layout; cambia solo il sottoinsieme sensibile alla densità.
   =========================================================================== */

/* Accesso (non autenticato): card centrata, leggibile, root 16px. */
.densita-accesso {
  --root-size: 16px;
  --contenuto-max: 26rem;   /* ~416px - colonna della card di accesso */
}

/* Portale fornitore: arioso, centrato, root 16px. */
.densita-fornitore {
  --root-size: 16px;
  --contenuto-max: 47.5rem; /* ~760px */
}

/* Back-office interno: denso, full-width, root 14px. */
.densita-backoffice {
  --root-size: 14px;
  --contenuto-max: none;    /* full-width fluido (≥1440px) */
  --pad-controllo-y: 6px;
  --pad-controllo-x: 10px;
  --pad-riga-y:      7px;    /* righe tabella compatte */
}