/* ============================================================
   DOSSIERO — TOKEN
   I nomi dei colori, delle misure e delle ombre. Nient'altro.

   Questo file non disegna niente: definisce le parole con cui
   parlano gli altri due. Se un colore serve in piu' di un posto,
   il suo posto e' qui.

   Ordine di inclusione: 01-token, 02-base, 03-componenti.
   ============================================================ */

/* ---- Tema scuro: e' il tema di casa, quello che si vede se
   nessuno sceglie niente. I valori sono quelli veri di Dossiero. */
:root {
  /* Fondi */
  --bg: #0a1220;          /* la pagina */
  --bg-soft: #0f172a;     /* dentro i campi, i fondi rientrati */
  --panel: #1e293b;       /* pannelli e superfici sollevate */
  --panel-2: #334155;     /* il pannello sopra il pannello */
  --card: #1e293b;        /* la card, che e' il mattone della pagina */
  --card-strong: #334155; /* la card che deve farsi notare */
  --card-muted: #334155;  /* la card di servizio, piu' spenta */

  /* Testo */
  --text: #f1f5f9;        /* quello che si legge */
  --muted: #94a3b8;       /* etichette, note, roba di contorno */
  --muted-strong: #cbd5e1;/* contorno che deve pero' leggersi bene */

  /* Righe */
  --line: #334155;        /* bordi e separatori */
  --line-strong: #475569; /* il bordo che divide sul serio */

  /* Accento — il ciano e' l'unico colore «di marca». Uno solo:
     se ce ne sono due, non ce n'e' nessuno. */
  --accent: #7ce1ff;
  --accent-2: #a5f3fc;
  --accent-soft: rgba(124, 225, 255, 0.08); /* il velo su hover e riga attiva */
  --accent-ring: rgba(124, 225, 255, 0.12); /* l'anello sul campo a fuoco */

  /* Semafori — non sono decorazione: dicono come sta una cosa. */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Semafori pieni, quelli dei badge di stato: piu' saturi perche'
     ci va sopra del testo bianco. */
  --state-red: #dc2626;    /* da fare adesso */
  --state-amber: #d97706;  /* si aspetta qualcuno */
  --state-green: #16a34a;  /* chiuso, andato bene */
  --state-sky: #38bdf8;    /* c'e' una data, un appuntamento */
  --state-grey: #64748b;   /* stato che non sappiamo classificare */

  /* L'interruttore. Non servono altrove — sono il grigio della leva
     spenta e il bianco della pallina — ma stanno qui e non dentro il
     componente: senza, il tema chiaro tornerebbe a farsi con le toppe
     `body.theme-light .switch-track`, che e' esattamente il modo in cui
     in Dossiero si erano accumulate duecento righe di rattoppi. */
  --switch-off: #64748b;
  --switch-knob: #ffffff;

  /* Bottone principale. Resta ciano anche in tema chiaro (vedi sotto):
     e' l'unico punto acceso della pagina e si riconosce a colpo d'occhio.
     Sta qui in due variabili proprio perche' un'app futura possa
     cambiarlo in un posto solo. */
  --btn-bg: linear-gradient(135deg, #7ce1ff, #a5f3fc);
  --btn-text: #04111d;
  --btn-glow: rgba(124, 225, 255, 0.3);
  --btn-glow-hover: rgba(124, 225, 255, 0.4);

  /* Angoli — quattro misure, non una a caso per volta. */
  --radius-sm: 6px;    /* bandierine, quadratini */
  --radius: 12px;      /* card, bottoni: la misura di default */
  --radius-lg: 14px;   /* voci di menu, riquadri morbidi */
  --radius-xl: 18px;   /* la cornice attorno alle tabelle */
  --radius-pill: 999px;/* badge e pillole */

  /* Ombre */
  --shadow: 0 18px 48px rgba(2, 8, 20, 0.3);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.24);

  /* Spazi. Il valore che ricorre ovunque e' 18px: e' il respiro
     standard fra due blocchi. */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 30px;

  /* Misure di struttura */
  --topbar-h: 74px;        /* barra in alto sul computer */
  --topbar-h-mobile: 54px; /* barra in alto sul telefono */
  --sidebar-w: 270px;
  --tap: 44px;             /* il minimo che un dito prende senza sbagliare */

  /* Tipografia */
  --font: Roboto, system-ui, -apple-system, sans-serif;
  --fs-label: 11px;  /* ETICHETTE MAIUSCOLE */
  --fs-small: 12px;  /* note, badge, aiutini */
  --fs-body: 15px;   /* il testo normale */
  --fs-lead: 17px;   /* il testo che introduce */
  --fs-h2: 22px;
  --fs-h1: 32px;
}

/* ---- Tema chiaro. Si accende mettendo la classe sul <body>:
   <body class="theme-light">.

   Cambiano SOLO i token: nessun componente e' riscritto qui sotto.
   Se per far funzionare il chiaro serve toccare un componente,
   vuol dire che quel componente ha un colore scritto a mano
   invece di una variabile — e va sistemato li', non qui. */
body.theme-light {
  --bg: #f5f7fb;
  --bg-soft: #eef3f9;
  --panel: #ffffff;
  --panel-2: #e6edf5;
  --card: #ffffff;
  --card-strong: #f8fafc;
  --card-muted: #eef3f8;

  --text: #111827;
  --muted: #475569;
  --muted-strong: #1f2937;

  --line: #cbd5e1;
  --line-strong: #94a3b8;

  /* Il ciano su fondo bianco non si legge: l'accento «testuale»
     diventa blu. Il bottone invece resta ciano (--btn-* non
     cambiano): li' il testo e' scuro e il contrasto tiene. */
  --accent: #0369a1;
  --accent-2: #0284c7;
  --accent-soft: rgba(2, 132, 199, 0.12);
  --accent-ring: rgba(2, 132, 199, 0.16);

  --shadow: 0 18px 48px rgba(30, 41, 59, 0.12);
  --shadow-soft: 0 10px 24px rgba(30, 41, 59, 0.1);

  /* Sul chiaro lo slate scuro sembrava gia' acceso: spento e' grigio
     chiaro, e la pallina bianca ci si vede sopra lo stesso. */
  --switch-off: #94a3b8;
  --switch-knob: #ffffff;
}

/* I punti dove si rompe la pagina. Nei @media vanno scritti a mano
   (le variabili li' dentro non funzionano), quindi stanno qui come
   promemoria e vanno usati questi, non numeri inventati:

     1100px  le griglie a piu' colonne diventano una colonna
      920px  il menu laterale diventa un cassetto, la barra si fissa
      640px  telefono: tutto in colonna, tabelle impilate
*/