/* Libris — design system
   Un solo file di token e primitive. Copialo in ogni nuovo materiale.
   Marchio: Archivo, un solo peso, solo #0B0B0B e #FFFFFF.
   Interfaccia: Archivo per testo e titoli, IBM Plex Mono per etichette e cifre. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* — inchiostro — */
  --ink:            #0B0B0B;   /* testo primario, marchio, bottone primario */
  --ink-strong:     #3A3A36;   /* navigazione, link a riposo */
  --ink-body:       #4A4A45;   /* corpo del testo su chiaro */
  --ink-soft:       #77776F;   /* testo secondario, seconda metà dei titoli */
  --ink-muted:      #9A9A94;   /* etichette mono, meta */
  --ink-faint:      #B4B4AC;   /* numerazione, note marginali */

  /* — superfici chiare — */
  --sur:            #FFFFFF;   /* pagina */
  --sur-1:          #FAFAF8;   /* barra interna, header di tabella */
  --sur-2:          #F4F4F2;   /* card standard */
  --sur-3:          #EDEDE9;   /* riempimento di barre e tracce */

  /* — filetti — */
  --line:           #E4E4DF;   /* riga di tabella, bordo su chiaro */
  --line-2:         #DEDED8;   /* filetto dentro una card */
  --line-3:         #C9C9C2;   /* separatore forte */

  /* — superfici scure — */
  --dark:           #0B0B0B;   /* fascia nera, card in evidenza */
  --dark-1:         #141412;   /* sidebar di prodotto */
  --dark-2:         #1D1D1A;   /* box dentro il nero */
  --dark-3:         #242420;   /* voce di menu attiva */
  --dark-line:      #2A2A26;   /* filetto sul nero */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   #DEDED8;
  --on-dark-muted:  #8E8E86;

  /* — accento, uno solo — */
  --acc:            #CBFF3C;   /* lime: bottone primario, un dato che deve saltare */
  --acc-pale:       #F0FFC9;   /* bottone secondario, callout */
  --acc-tint:       #F6FFDE;   /* riga evidenziata in tabella */
  --acc-ink:        #2C4A00;   /* testo su lime */

  /* — semantici, mai decorativi — */
  --pos:            #0E7C4A;
  --att:            #F0541E;
  --info:           #1B3BE0;
  /* Il pieno --att è un segnale, non un fondo: su una superficie larga grida.
     Questi due sono la sua versione da fondo — un avviso dentro un form, una
     riga rifiutata — e stanno insieme perché il testo scuro sul pale è l'unica
     combinazione delle due che si legga davvero. */
  --att-pale:       #FFF0EB;
  --att-ink:        #8F2C08;

  /* — raggi — */
  --r-ctl:  8px;    /* bottone, chip, input */
  --r-sm:   12px;   /* card piccola, riga evidenziata */
  --r-md:   14px;   /* mockup di prodotto, card interna */
  --r-lg:   20px;   /* card standard */
  --r-xl:   24px;   /* card grande, fascia */

  /* — tipografia — */
  --font: Archivo, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --track-display: -0.04em;
  --track-head:    -0.03em;
  --track-body:    -0.006em;
  --track-label:    0.14em;

  /* — texture e ombra — */
  --dots: radial-gradient(var(--line-2) 1px, transparent 1px);
  --dots-size: 14px 14px;
  --shadow-on-dark: 0 24px 60px rgba(0,0,0,0.35);
}

*  { box-sizing: border-box; font-variant-numeric: tabular-nums; }
html { -webkit-font-smoothing: antialiased; }
body { margin:0; background:var(--sur); color:var(--ink); font-family:var(--font); letter-spacing:var(--track-body); }
p { margin:0; text-wrap:pretty; }
a { color:var(--ink); text-decoration:none; }

/* — scala tipografica — */
.display   { font-weight:700; letter-spacing:var(--track-display); line-height:1.04; margin:0; }
.display-1 { font-size:56px; }  .display-2 { font-size:44px; }
.display-3 { font-size:40px; }  .display-4 { font-size:32px; }
.head-1 { font-size:23px; font-weight:600; letter-spacing:var(--track-head); line-height:1.15; margin:0; }
.head-2 { font-size:19px; font-weight:600; letter-spacing:var(--track-head); margin:0; }
.head-3 { font-size:17px; font-weight:600; letter-spacing:var(--track-head); margin:0; }
.body-lg { font-size:17.5px; line-height:1.55; color:var(--ink-body); }
.body    { font-size:15.5px; line-height:1.55; color:var(--ink-body); }
.body-sm { font-size:13.5px; line-height:1.5;  color:var(--ink-soft); }
.label   { font-family:var(--mono); font-size:10.5px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); }
.num     { font-family:var(--mono); font-size:12px; }
/* la seconda metà del titolo va in grigio: è la firma tipografica del marchio */
.g { color:var(--ink-soft); }

/* — primitive — */
.card      { background:var(--sur-2); border-radius:var(--r-lg); padding:24px 26px; }
.card-dots { background-image:var(--dots); background-size:var(--dots-size); }
.card-dark { background:var(--dark); color:var(--on-dark); border-radius:var(--r-lg); padding:24px 26px; }
.card-acc  { background:var(--acc-pale); color:var(--acc-ink); border-radius:var(--r-lg); padding:24px 26px; box-shadow:inset 0 0 0 1.5px var(--acc); }

.btn      { display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 24px; border:0; border-radius:var(--r-ctl); font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer; }
.btn-acc  { background:var(--acc); color:var(--ink); }
.btn-dark { background:var(--ink); color:var(--on-dark); }
.btn-soft { background:var(--sur-2); color:var(--ink); font-weight:500; }
.btn-pale { background:var(--acc-pale); color:var(--acc-ink); }
.btn-sm   { height:36px; padding:0 16px; font-size:13.5px; }

.chip     { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:7px; font-family:var(--mono); font-size:10px; letter-spacing:0.06em; white-space:nowrap; }
.chip-acc { background:var(--acc); color:var(--ink); }
.chip-pale{ background:var(--acc-pale); color:var(--acc-ink); }
.chip-soft{ background:var(--sur-2); color:var(--ink-body); }

/* — campi —
   Stessa altezza e stesso raggio del bottone: in un form stanno incolonnati
   uno sotto l'altro, e due altezze diverse si vedono subito.
   ⚠️ Il campo ha un BORDO, la card no. Non è un'incoerenza: la card è una
   superficie, il campo è un posto dove si scrive — se non si vede dove
   comincia, non si capisce che è compilabile. */
.field { display:block; width:100%; height:48px; padding:0 14px;
         background:var(--sur); border:1px solid var(--line-3); border-radius:var(--r-ctl);
         font-family:var(--font); font-size:15.5px; color:var(--ink);
         letter-spacing:var(--track-body); }
.field::placeholder { color:var(--ink-faint); }
/* ⚠️ `outline` e non `border`: cambiare il bordo sposterebbe il contenuto di un
   pixel a ogni fuoco. E il fuoco resta visibile — toglierlo chiude fuori chi
   naviga da tastiera. */
.field:focus { outline:2px solid var(--ink); outline-offset:-1px; border-color:var(--ink); }
.field:disabled { background:var(--sur-2); color:var(--ink-muted); }
/* Un codice si trascrive: cifre tabellari, larghe, spaziate, e nessuna
   correzione automatica che ci metta le mani. */
.field-code { font-family:var(--mono); font-size:20px; letter-spacing:0.26em;
              text-align:center; text-transform:uppercase; padding-right:0; }

.btn-block { width:100%; justify-content:center; }

/* — avvisi —
   Due soli stati, e nessuno dei due è decorativo: uno dice «è andata», l'altro
   «non è andata». Un terzo colore in un form serve solo a farne perdere il
   senso a tutti e tre. */
.note     { border-radius:var(--r-sm); padding:12px 14px; font-size:13.5px; line-height:1.45; }
.note-acc { background:var(--acc-tint); color:var(--acc-ink); }
.note-att { background:var(--att-pale); color:var(--att-ink); }

table.tb { width:100%; border-collapse:collapse; }
table.tb th { font-family:var(--mono); font-size:9.5px; letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-muted); font-weight:400; text-align:left; padding:0 12px 9px 0; }
table.tb td { font-size:14px; padding:10px 12px 10px 0; border-top:1px solid var(--line); vertical-align:top; }
table.tb td.n, table.tb th.n { text-align:right; padding-right:0; white-space:nowrap; }
table.tb td.n { font-family:var(--mono); font-size:13px; }

/* — marchio — */
.logo      { display:inline-block; font-family:var(--font); font-weight:500; letter-spacing:-0.02em; line-height:1; }
.logo::after { content:""; display:block; width:100%; height:0.085em; background:currentColor; margin-top:0.30em; }
.logo-mark { display:inline-block; font-family:var(--font); font-weight:500; line-height:1; }
.logo-mark::after { content:""; display:block; width:100%; height:0.085em; background:currentColor; margin-top:0.22em; }