/*
 * Platone — fondamenti di design (widget Gestione documentale)
 *
 * Valori ricavati dai frame Figma "Platone - Widget" → pagina
 * "Widget 3 - Gestione Documentale" (node 2071:3533). Il file Figma NON
 * pubblica stili (colori/testo/effetti vuoti): i colori sono campionati
 * dagli export, le misure riportate dalla scala del frame (≈1440px).
 *
 * FONT: "DM Sans" — Google Fonts, licenza SIL Open Font License 1.1.
 * DA CONFERMARE con il reparto UX: il Figma non dichiara il carattere,
 * è stato riconosciuto a vista. Unico punto di caricamento: questa riga.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ---------- Font ---------- */
  --font-titoli: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-testo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --peso-regolare: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* ---------- Scala tipografica (dimensione / interlinea) ---------- */
  --testo-xs: 11px;    --interlinea-xs: 16px;   /* etichette KPI, eyebrow, badge */
  --testo-sm: 12px;    --interlinea-sm: 18px;   /* celle tabella, aiuti campo */
  --testo-base: 14px;  --interlinea-base: 20px; /* testo corrente, campi, bottoni */
  --testo-md: 16px;    --interlinea-md: 24px;   /* titoli card e modali */
  --testo-lg: 20px;    --interlinea-lg: 28px;   /* titoli sezione */
  --testo-kpi: 24px;   --interlinea-kpi: 32px;  /* numeri KPI */
  --testo-xl: 28px;    --interlinea-xl: 36px;   /* titolo pagina */

  /* ---------- Colori: brand e superfici ---------- */
  --colore-primario: #0062ff;
  --colore-primario-hover: #0052d6;
  --colore-primario-tenue: #e4efff;
  --colore-primario-bordo-tenue: #b0c3e7;
  --colore-su-primario: #ffffff;

  --colore-sfondo-shell: var(--colore-primario);  /* sidebar + barra in alto */
  --colore-sidebar-voce-attiva: rgba(255, 255, 255, 0.14);
  --colore-sidebar-decoro: rgba(255, 255, 255, 0.10);
  --colore-sfondo-pagina: #f2f2f5;
  --colore-superficie: #ffffff;
  --colore-superficie-tenue: #f8f8f9;             /* intestazioni tabella, aree secondarie */
  --colore-superficie-hover: #f4f7ff;
  --colore-velo: rgba(19, 27, 41, 0.45);          /* sfondo dietro le modali */

  /* ---------- Colori: testo e bordi ---------- */
  --colore-testo: #131b29;
  --colore-testo-secondario: #5b6472;
  --colore-testo-terziario: #7d8592;
  --colore-bordo: #e3e5ea;
  --colore-bordo-forte: #cdd1d8;
  --colore-focus: #0062ff;
  --colore-disabilitato-sfondo: #eef0f3;
  --colore-disabilitato-testo: #9aa1ab;

  /* ---------- Colori: stato (con il loro sfondo tenue) ---------- */
  --colore-pericolo: #df1e39;
  --colore-pericolo-tenue: #fde3e6;
  --colore-pericolo-testo: #b4122a;
  --colore-successo: #1f8a5b;
  --colore-successo-tenue: #ddf5e8;
  --colore-successo-testo: #17734b;
  --colore-avviso: #c37d0c;
  --colore-avviso-tenue: #fdf0c9;
  --colore-avviso-testo: #74500a;
  --colore-info: #0b84c6;
  --colore-info-tenue: #dcf1fc;
  --colore-info-testo: #0a6496;
  --colore-neutro-tenue: #eceef2;
  --colore-neutro-testo: #4b5563;

  /* ---------- Colori: serie dei grafici (ordine fisso per tipologia) ---------- */
  --colore-serie-durc: #2b53ff;
  --colore-serie-polizza: #3b7dc4;
  --colore-serie-certificazione: #1f7a4d;
  --colore-serie-carta: #c37d0c;
  --colore-serie-autocertificazione: #c93336;
  --colore-grafico-griglia: #e3e5ea;

  /* ---------- Spaziature ---------- */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 20px;
  --spazio-6: 24px;
  --spazio-8: 32px;
  --spazio-10: 40px;

  /* ---------- Raggi ---------- */
  --raggio-sm: 6px;    /* campi, bottoni */
  --raggio-md: 8px;    /* menu, alert */
  --raggio-lg: 12px;   /* card, modali */
  --raggio-xl: 32px;   /* angolo del pannello contenuti sulla shell blu */
  --raggio-pillola: 999px;

  /* ---------- Ombre ---------- */
  --ombra-card: 0 1px 3px rgba(19, 27, 41, 0.08);
  --ombra-menu: 0 8px 24px rgba(19, 27, 41, 0.16);
  --ombra-modale: 0 20px 48px rgba(19, 27, 41, 0.24);
  --anello-focus: 0 0 0 3px rgba(0, 98, 255, 0.28);

  /* ---------- Transizioni ---------- */
  --durata-rapida: 120ms;
  --durata-media: 200ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout ---------- */
  --larghezza-sidebar: 260px;
  --altezza-topbar: 72px;
  --larghezza-contenuto-max: 1280px;
  --larghezza-modale-sm: 440px;
  --larghezza-modale-md: 560px;
  --larghezza-modale-lg: 880px;
  --larghezza-drawer: 440px;
}