/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --it-border-base: 1px; /** Dimensione base di un bordo. */
  --it-border-double: 2px; /** Dimensione doppia di un bordo. */
  --it-border-thick: 4px; /** Dimensione spessa di un bordo. */
  --it-border-broad: 8px; /** Dimensione larga di un bordo. */
  --it-color-black-10: rgba(0, 0, 0, 0.1); /** Colore neutro */
  --it-color-black-15: rgba(0, 0, 0, 0.15); /** Colore neutro */
  --it-color-black-25: rgba(0, 0, 0, 0.25); /** Colore neutro */
  --it-color-black-50: rgba(0, 0, 0, 0.5); /** Colore neutro */
  --it-color-black-85: rgba(0, 0, 0, 0.85); /** Colore neutro */
  --it-color-black-100: #000000; /** Colore neutro */
  --it-color-black-05: rgba(0, 0, 0, 0.05); /** Colore neutro */
  --it-color-white: #ffffff; /** Colore neutro */
  --it-color-blue-20: #003366; /** Colore tema default */
  --it-color-blue-25: #004080; /** Colore tema default */
  --it-color-blue-30: #004d99; /** Colore tema default */
  --it-color-blue-40: #0066cc; /** Colore tema default - valore base */
  --it-color-blue-48: #207ad5; /** Colore tema default */
  --it-color-blue-57: #4392e0; /** Colore tema default */
  --it-color-blue-67: #6aaaeb; /** Colore tema default */
  --it-color-blue-77: #94c4f5; /** Colore tema default */
  --it-color-blue-87: #bfdfff; /** Colore tema default */
  --it-color-blue-97: #f2f7fc; /** Colore tema default */
  --it-color-seagreen-10: #003121; /** Colore tema secondario */
  --it-color-seagreen-14: #004931; /** Colore tema secondario */
  --it-color-seagreen-19: #006242; /** Colore tema secondario */
  --it-color-seagreen-24: #007a52; /** Colore tema secondario - valore base */
  --it-color-seagreen-39: #329574; /** Colore tema secondario */
  --it-color-seagreen-54: #64af96; /** Colore tema secondario */
  --it-color-seagreen-69: #96cab9; /** Colore tema secondario */
  --it-color-seagreen-76: #afd7ca; /** Colore tema secondario */
  --it-color-seagreen-84: #c8e4db; /** Colore tema secondario */
  --it-color-seagreen-92: #e1f2ec; /** Colore tema secondario */
  --it-color-slate-20: #17324d; /** Colore neutro */
  --it-color-slate-28: #2f475e; /** Colore neutro */
  --it-color-slate-36: #455b71; /** Colore neutro */
  --it-color-slate-44: #5c6f82; /** Colore neutro - valore base */
  --it-color-slate-52: #768594; /** Colore neutro */
  --it-color-slate-62: #929da9; /** Colore neutro */
  --it-color-slate-68: #a3adb7; /** Colore neutro */
  --it-color-slate-78: #c5c7c9; /** Colore neutro */
  --it-color-slate-85: #d9dadb; /** Colore neutro */
  --it-color-slate-93: #ebeced; /** Colore neutro */
  --it-color-gray-10: #1a1a1a; /** Colore neutro */
  --it-color-gray-15: #262626; /** Colore neutro - valore base */
  --it-color-gray-25: #404040; /** Colore neutro */
  --it-color-gray-32: #525252; /** Colore neutro */
  --it-color-gray-45: #737373; /** Colore neutro */
  --it-color-gray-64: #a3a3a3; /** Colore neutro */
  --it-color-gray-83: #d4d4d4; /** Colore neutro */
  --it-color-gray-90: #e5e5e5; /** Colore neutro */
  --it-color-gray-96: #f5f5f5; /** Colore neutro */
  --it-color-gray-98: #fafafa; /** Colore neutro */
  --it-color-red-25: #661a26; /** Colore di sistema */
  --it-color-red-30: #7a1f2e; /** Colore di sistema */
  --it-color-red-37: #992639; /** Colore di sistema */
  --it-color-red-44: #b32d43; /** Colore di sistema */
  --it-color-red-50: #cc334d; /** Colore di sistema - valore base */
  --it-color-red-60: #d65c70; /** Colore di sistema */
  --it-color-red-70: #e08593; /** Colore di sistema */
  --it-color-red-80: #ebadb8; /** Colore di sistema */
  --it-color-red-90: #f5d6db; /** Colore di sistema */
  --it-color-red-96: #fbeff1; /** Colore di sistema */
  --it-color-emerald-15: #004d33; /** Colore di sistema */
  --it-color-emerald-20: #006644; /** Colore di sistema */
  --it-color-emerald-25: #008055; /** Colore di sistema - valore base */
  --it-color-emerald-35: #00b377; /** Colore di sistema */
  --it-color-emerald-40: #00cc88; /** Colore di sistema */
  --it-color-emerald-48: #22d499; /** Colore di sistema */
  --it-color-emerald-57: #43e0ac; /** Colore di sistema */
  --it-color-emerald-67: #6ee7bf; /** Colore di sistema */
  --it-color-emerald-77: #99eed2; /** Colore di sistema */
  --it-color-emerald-87: #c8f6e7; /** Colore di sistema */
  --it-color-orange-20: #663d00; /** Colore di sistema */
  --it-color-orange-25: #804d00; /** Colore di sistema */
  --it-color-orange-30: #995c00; /** Colore di sistema */
  --it-color-orange-35: #b36b00; /** Colore di sistema */
  --it-color-orange-40: #cc7a00; /** Colore di sistema - valore base */
  --it-color-orange-48: #d48d22; /** Colore di sistema */
  --it-color-orange-57: #e0a243; /** Colore di sistema */
  --it-color-orange-67: #e7b66e; /** Colore di sistema */
  --it-color-orange-77: #eecd9a; /** Colore di sistema */
  --it-color-orange-87: #f6e4c8; /** Colore di sistema */
  --it-color-teal-20: #05615e; /** Colore di risalto */
  --it-color-teal-26: #077f7b; /** Colore di risalto */
  --it-color-teal-32: #089994; /** Colore di risalto */
  --it-color-teal-36: #09afa9; /** Colore di risalto */
  --it-color-teal-42: #0bcbc5; /** Colore di risalto */
  --it-color-teal-50: #2bd6d0; /** Colore di risalto */
  --it-color-teal-60: #52e0db; /** Colore di risalto */
  --it-color-teal-70: #79ece8; /** Colore di risalto */
  --it-color-teal-80: #a3f5f2; /** Colore di risalto */
  --it-color-teal-90: #ccfffd; /** Colore di risalto */
  --it-font-sans: 'Titillium Web'; /** Famiglia font senza grazie */
  --it-font-serif: Lora; /** Famiglia font con grazie */
  --it-font-mono: 'Roboto Mono'; /** Famiglia font mono spaziata */
  --it-font-size-1: 12px; /** Dimensione della scala tipografica */
  --it-font-size-2: 14px; /** Dimensione della scala tipografica */
  --it-font-size-3: 16px; /** Dimensione della scala tipografica */
  --it-font-size-4: 18px; /** Dimensione della scala tipografica */
  --it-font-size-5: 20px; /** Dimensione della scala tipografica */
  --it-font-size-6: 24px; /** Dimensione della scala tipografica */
  --it-font-size-7: 28px; /** Dimensione della scala tipografica */
  --it-font-size-8: 32px; /** Dimensione della scala tipografica */
  --it-font-size-9: 40px; /** Dimensione della scala tipografica */
  --it-font-size-10: 48px; /** Dimensione della scala tipografica */
  --it-font-size-11: 56px; /** Dimensione della scala tipografica */
  --it-font-leading-1: 1.1; /** Spazio tra due righe di testo */
  --it-font-leading-2: 1.2; /** Spazio tra due righe di testo */
  --it-font-leading-3: 1.3; /** Spazio tra due righe di testo */
  --it-font-leading-4: 1.4; /** Spazio tra due righe di testo */
  --it-font-leading-5: 1.5; /** Spazio tra due righe di testo */
  --it-font-tracking-short: -1px; /** Spazio tra le lettere di un font */
  --it-font-tracking-narrow: -1.3px; /** Spazio tra le lettere di un font */
  --it-font-tracking-tight: -2px; /** Spazio tra le lettere di un font */
  --it-font-tracking-normal: 0px; /** Spazio tra le lettere di un font */
  --it-font-weight-extra-light: 200; /** Peso del font */
  --it-font-weight-light: 300; /** Peso del font */
  --it-font-weight-regular: 400; /** Peso del font */
  --it-font-weight-semibold: 600; /** Peso del font */
  --it-font-weight-bold: 700; /** Peso del font */
  --it-radius-smooth: 4px; /** Raggio di un bordo */
  --it-radius-circle: 80px; /** Raggio di un bordo */
  --it-radius-rounded: 40px; /** Raggio di un bordo */
  --it-spacing-1x: 4px; /** Dimensione baseline */
  --it-spacing-2x: 8px; /** 2x la dimensione della baseline */
  --it-spacing-3x: 12px; /** 3x la dimensione della baseline */
  --it-spacing-4x: 16px; /** 4x la dimensione della baseline */
  --it-spacing-5x: 20px; /** 5x la dimensione della baseline */
  --it-spacing-6x: 24px; /** 6x la dimensione della baseline */
  --it-spacing-8x: 32px; /** 8x la dimensione della baseline */
  --it-spacing-10x: 40px; /** 10x la dimensione della baseline */
  --it-spacing-12x: 48px; /** 12x la dimensione della baseline */
  --it-spacing-14x: 56px; /** 14x la dimensione della baseline */
  --it-spacing-16x: 64px; /** 16x la dimensione della baseline */
  --it-spacing-24x: 96px; /** 24x la dimensione della baseline */
  --it-sizing-quarter: 25%; /** Dimensione di un quarto rispetto all'elemento contenitore */
  --it-sizing-half: 50%; /** Dimensione della metà rispetto all'elemento contenitorer */
  --it-sizing-two-thirds: 75%; /** Dimensione di un tre/quarti rispetto all'elemento contenitorer */
  --it-sizing-full: 100%; /** Dimensione del 100% rispetto all'elemento contenitore */
  --it-shadow-blur-s: 4px; /** Raggio di sfocatura dell'ombreggiatura */
  --it-shadow-blur-m: 16px; /** Raggio di sfocatura dell'ombreggiatura */
  --it-shadow-blur-l: 48px; /** Raggio di sfocatura dell'ombreggiatura */
  --it-shadow-offset-s: 4px; /** Offset dell'ombreggiatura */
  --it-shadow-offset-m: 8px; /** Offset dell'ombreggiatura */
  --it-shadow-offset-l: 16px; /** Offset dell'ombreggiatura */
  --it-icon-size-xs: 16px; /** Dimensione icona molto piccola */
  --it-icon-size-s: 24px; /** Dimensione icona piccola */
  --it-icon-size-m: 32px; /** Dimensione icona media */
  --it-icon-size-l: 48px; /** Dimensione icona grande */
  --it-icon-size-xl: 64px; /** Dimensione icona molto grande */
  --it-color-background-primary: var(--it-color-blue-40); /** Sfondo primario, utilizzato per elementi interattivi (buttons, links) ed elementi caratterizzati con l’identità visiva. */
  --it-color-background-primary-light: var(--it-color-blue-87); /** Sfondo con contrasto leggero, utilizzato come alternativa al colore primario per elementi interattivi. */
  --it-color-background-primary-lighter: var(--it-color-blue-97); /** Sfondo di colore primario con contrasto ridotto, definisce una sezione o una parte di essa nel contesto della pagina. */
  --it-color-background-primary-hover: var(--it-color-blue-30); /** Sfondo utilizzato su componenti primari interattivi nello stato di :hover. */
  --it-color-background-primary-active: var(--it-color-blue-20); /** Sfondo utilizzato su componenti primari interattivi nello stato attivo e premuto. */
  --it-color-background-primary-muted: var(--it-color-blue-30); /** Sfondo utilizzato su sezioni di pagina. */
  --it-color-background-primary-deep: var(--it-color-blue-20); /** Sfondo utilizzato su sezioni di pagina. */
  --it-color-background-secondary: var(--it-color-slate-44); /** Sfondo alternativo, utilizzato per elementi interattivi secondari o per sezioni di una pagina. */
  --it-color-background-secondary-hover: var(--it-color-slate-28); /** Sfondo utilizzato su elementi interattivi secondari nello stato di :hover. */
  --it-color-background-secondary-active: var(--it-color-slate-20); /** Sfondo utilizzato su elementi interattivi secondari nello stato attivo e premuto. */
  --it-color-background-secondary-light: var(--it-color-slate-68); /** Sfondo colore secondario chiaro. */
  --it-color-background-secondary-lighter: var(--it-color-slate-85); /** Sfondo colore secondario molto chiaro. */
  --it-color-background-accent: var(--it-color-teal-32); /** Sfondo con colore di accento per elementi interattivi. */
  --it-color-background-accent-hover: var(--it-color-teal-26); /** Sfondo utilizzato su elementi interattivi di accento nello stato di :hover. */
  --it-color-background-muted: var(--it-color-gray-96); /** Sfondo con contrasto molto leggero, definisce sezioni di una pagina o paragrafi di testo. */
  --it-color-background-inverse: var(--it-color-white); /** Sfondo invertito, utilizzato in combinazione con uno sfondo pagina/sezione di tipo primary, secondary  o con colori neutri. */
  --it-color-background-disabled: var(--it-color-slate-85); /** Sfondo per elementi interattivi disabilitati/disattivati */
  --it-color-background-subtle: var(--it-color-gray-83); /** Sfondo chiaro, utilizzato per definire sezioni di una pagina */
  --it-color-background-emphasis: var(--it-color-slate-20); /** Sfondo di enfasi, utilizzato per mettere in risalto precise sezioni di una pagina */
  --it-color-background-success: var(--it-color-emerald-25); /** Sfondo per uno stato di successo, utilizzato per elementi interattivi o sfondo di componenti.  Il testo deve essere inverse */
  --it-color-background-success-light: var(--it-color-emerald-87); /** Sfondo di successo per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */
  --it-color-background-success-hover: var(--it-color-emerald-20); /** Sfondo di successo, utilizzato per elementi interattivi nello stato di :hover */
  --it-color-background-success-active: var(--it-color-emerald-15); /** Sfondo di successo, utilizzato per elementi interattivi nello stato attivo e premuto. */
  --it-color-background-warning: var(--it-color-orange-30); /** Sfondo di allerta, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse */
  --it-color-background-warning-light: var(--it-color-orange-87); /** Sfondo di allerta per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */
  --it-color-background-warning-hover: var(--it-color-orange-25); /** Sfondo di allerta, utilizzato per elementi interattivi nello stato di :hover */
  --it-color-background-warning-active: var(--it-color-orange-20); /** Sfondo di allerta, utilizzato per elementi interattivi nello stato attivo e premuto. */
  --it-color-background-danger: var(--it-color-red-50); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse. */
  --it-color-background-danger-light: var(--it-color-red-96); /** Sfondo di pericolo o errore per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */
  --it-color-background-danger-hover: var(--it-color-red-37); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato di :hover. */
  --it-color-background-danger-active: var(--it-color-red-25); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato attivo e premuto. */
  --it-color-border-primary: var(--it-color-blue-40); /** Bordo primario, utilizzato per elementi interattivi cliccabili. */
  --it-color-border-primary-hover: var(--it-color-blue-30); /** Bordo primario per stato interattivo hover */
  --it-color-border-primary-active: var(--it-color-blue-20); /** Bordo primario per stato interattivo attivo e premuto. */
  --it-color-border-secondary: var(--it-color-slate-44); /** Bordo secondario, utilizzato per elementi interattivi cliccabili */
  --it-color-border-secondary-hover: var(--it-color-slate-28); /** Bordo secondario per stato interattivo hover */
  --it-color-border-secondary-active: var(--it-color-slate-20); /** Bordo secondario per stato interattivo attivo e premuto. */
  --it-color-border-inverse: var(--it-color-white); /** Bordo invertito, utilizzato su sfondo a contrasto di tipo primary, secondary o emphasis */
  --it-color-border-disabled: var(--it-color-slate-85); /** Bordo per elementi interattivi disabilitati */
  --it-color-border-subtle: var(--it-color-slate-78); /** Bordo separatore, delimita le sezioni di una pagina, componenti o singoli elementi */
  --it-color-border-success: var(--it-color-emerald-25); /** Bordo di successo, utilizzato per elementi interattivi o statici (alert, notifications, etc) */
  --it-color-border-success-hover: var(--it-color-emerald-20); /** Bordo di successo per stato interattivo hover */
  --it-color-border-success-active: var(--it-color-emerald-15); /** Bordo di successo per stato interattivo attivo e premuto. */
  --it-color-border-warning: var(--it-color-orange-30); /** Bordo di allerta, utilizzato per elementi interattivi o statici (vedi esempio success) */
  --it-color-border-warning-hover: var(--it-color-orange-25); /** Bordo di allerta per stato interattivo hover */
  --it-color-border-warning-active: var(--it-color-orange-20); /** Bordo di allerta per stato interattivo attivo e premuto. */
  --it-color-border-danger: var(--it-color-red-50); /** Colore di un bordo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o statici (vedi esempio success) */
  --it-color-border-danger-hover: var(--it-color-red-37); /** Colore di sfondo che avvisa di un pericolo o errore per stato interattivo :hover. */
  --it-color-border-danger-active: var(--it-color-red-25); /** Colore di sfondo che avvisa di un pericolo o errore per stato attivo e premuto. */
  --it-color-text-base: var(--it-color-gray-10); /** Corpo pagina base */
  --it-color-text-primary: var(--it-color-blue-40); /** Testo con link */
  --it-color-text-secondary: var(--it-color-slate-28); /** Corpo pagina alternativo, contenuti di dettaglio, testo button secondary */
  --it-color-text-muted: var(--it-color-slate-44); /** Testo di supporto per contenuti molto brevi */
  --it-color-text-disabled: var(--it-color-slate-44); /** Testo disabilitato */
  --it-color-text-success: var(--it-color-emerald-25); /** Testo di successo, può essere anche interattivo (button, link) */
  --it-color-text-success-hover: var(--it-color-emerald-20); /** Testo di successo interattivo nello stato hover */
  --it-color-text-success-active: var(--it-color-emerald-15); /** Testo di successo interattivo nello stato attivo e premuto. */
  --it-color-text-warning: var(--it-color-orange-30); /** Testo di allerta, può essere anche interattivo (button, link) */
  --it-color-text-warning-hover: var(--it-color-orange-25); /** Testo di allerta interattivo nello stato hover */
  --it-color-text-warning-active: var(--it-color-orange-20); /** Testo di allerta interattivo nello stato attivo e premuto. */
  --it-color-text-danger: var(--it-color-red-50); /** Colore del testo per problema o errore, può essere anche interattivo (link, button) */
  --it-color-text-danger-hover: var(--it-color-red-37); /** Colore del testo per problema o errore interattivo nello stato hover */
  --it-color-text-danger-active: var(--it-color-red-25); /** Colore del testo per problema o errore interattivo nello stato attivo e premuto. */
  --it-color-text-inverse: var(--it-color-white); /** Testo invertito per sfondi a contrasto (primary, secondary, emphasis) */
  --it-color-text-accent: var(--it-color-teal-32); /** Testo di accento, alternativo al primary per elementi interattivi su sfondi a contrasto */
  --it-color-link-base: var(--it-color-blue-40); /** Colore base per i link */
  --it-color-link-hover: var(--it-color-blue-30); /** Colore per i link nello stato hover */
  --it-color-link-active: var(--it-color-blue-20); /** Colore per i link nello stato active */
  --it-color-link-secondary: var(--it-color-slate-28); /** Colore del link secondario, richiede sempre la sottolineatura. */
  --it-color-link-secondary-hover: var(--it-color-slate-20); /** Testo del button secondary nello stato hover */
  --it-color-link-secondary-active: var(--it-color-slate-20); /** Testo del button secondary nello stato attivo e premuto. */
  --it-color-link-inverse: var(--it-color-white); /** Colore per i link invertiti */
  --it-color-link-disabled: var(--it-color-slate-62); /** Colore per i link disabilitati */
  --it-color-link-accent: var(--it-color-teal-32); /** Colore di risalto per un link */
  --it-color-link-accent-hover: var(--it-color-teal-26); /** Colore di risalto per un link in stato hover. */
  --it-color-outline-focus: var(--it-color-gray-10); /** Colore di evidenziazione dello stato focus */
  --it-color-shadow-whisper: var(--it-color-black-05); /** Colore ombreggiatura leggermente visibile */
  --it-color-shadow-soft: var(--it-color-black-10); /** Colore ombreggiatura chiara */
  --it-color-shadow-dark: var(--it-color-black-15); /** Colore ombreggiatura molto visibile */
  --it-spacing-3xs: var(--it-spacing-1x); /** Valore 3-extra-small nella scala dimensionale per la spaziatura */
  --it-spacing-xxs: var(--it-spacing-2x); /** Valore extra-extra small nella scala dimensionale per la spaziatura */
  --it-spacing-xs: var(--it-spacing-3x); /** Valore extra small nella scala dimensionale per la spaziatura */
  --it-spacing-s: var(--it-spacing-4x); /** Valore small nella scala dimensionale per la spaziatura */
  --it-spacing-m: var(--it-spacing-6x); /** Valore medium nella scala dimensionale per la spaziatura */
  --it-spacing-l: var(--it-spacing-8x); /** Valore large nella scala dimensionale per la spaziatura */
  --it-spacing-xl: var(--it-spacing-10x); /** Valore extra-large nella scala dimensionale per la spaziatura */
  --it-spacing-xxl: var(--it-spacing-12x); /** Valore extra-extra-large nella scala dimensionale per la spaziatura */
  --it-spacing-3xl: var(--it-spacing-24x); /** Valore 3-extra-large nella scala dimensionale per la spaziatura */
  --it-theme-italia-base: var(--it-color-blue-40); /** Colore base del tema */
  --it-theme-italia-light: var(--it-color-blue-87); /** Colore del tema chiaro */
  --it-theme-italia-lighter: var(--it-color-blue-97); /** Colore del tema molto chiaro */
  --it-theme-italia-subtle: var(--it-color-blue-30); /** Colore del tema meno saturo */
  --it-theme-italia-muted: var(--it-color-blue-25); /** Colore del tema molto meno saturo */
  --it-theme-italia-deep: var(--it-color-blue-20); /** Colore del tema scuro */
  --it-elevation-low: 0 var(--it-shadow-blur-s) var(--it-shadow-offset-s) 0 var(--it-color-shadow-whisper);
  --it-elevation-medium: 0 var(--it-shadow-offset-m) var(--it-shadow-blur-m) 0 var(--it-color-shadow-soft);
  --it-elevation-high: 0 var(--it-shadow-offset-l) var(--it-shadow-blur-l) 0 var(--it-color-shadow-dark);
  --it-code-font: var(--it-font-mono); /** La famiglia di font predefinita per i blocchi di codice. */
  --it-data-font: var(--it-font-mono); /** La famiglia di font predefinita per il contenuto della visualizzazione dei dati. */
  --it-heading-font-weight: var(--it-font-weight-bold); /** Il peso di font predefinito per i titoli. */
  --it-heading-font-weight-weak: var(--it-font-weight-semibold); /** Il peso di font alternativo per i titoli secondari. */
  --it-heading-leading: var(--it-font-leading-2); /** Spazio tra le righe predefinito per i titoli. */
  --it-body-leading: var(--it-font-leading-5); /** Spazio tra le righe predefinito per il corpo del testo. */
  --it-caption-leading: var(--it-font-leading-3); /** Spazio tra le righe predefinito per le didascalie. */
  --it-lead-leading: var(--it-font-leading-3); /** Spazio tra le righe predefinito per il testo in primo piano. */
  --it-heading-1-font-size: var(--it-font-size-9); /** La dimensione di font predefinita per il titolo 1. */
  --it-heading-1-font-size-l: var(--it-font-size-10); /** La dimensione di font predefinita per il titolo 1 grande. */
  --it-heading-2-font-size: var(--it-font-size-8); /** La dimensione di font predefinita per il titolo 2. */
  --it-heading-2-font-size-l: var(--it-font-size-9); /** La dimensione di font predefinita per il titolo 2 grande. */
  --it-heading-3-font-size-l: var(--it-font-size-8); /** La dimensione di font predefinita per il titolo 3 grande. */
  --it-heading-3-font-size: var(--it-font-size-7); /** La dimensione di font predefinita per il titolo 3. */
  --it-heading-4-font-size: var(--it-font-size-6); /** La dimensione di font predefinita per il titolo 4. */
  --it-heading-4-font-size-l: var(--it-font-size-7); /** La dimensione di font predefinita per il titolo 4 grande. */
  --it-heading-5-font-size: var(--it-font-size-5); /** La dimensione di font predefinita per il titolo 5. */
  --it-heading-5-font-size-l: var(--it-font-size-6); /** La dimensione di font predefinita per il titolo 5 grande. */
  --it-heading-6-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per il titolo 6. */
  --it-heading-6-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per il titolo 6 grande. */
  --it-body-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per il corpo del testo. */
  --it-body-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per il corpo del testo grande. */
  --it-caption-font-size: var(--it-font-size-2); /** La dimensione di font predefinita per le didascalie. */
  --it-lead-font-size: var(--it-font-size-5); /** La dimensione di font predefinita per il testo in primo piano. */
  --it-lead-font-size-l: var(--it-font-size-6); /** La dimensione di font predefinita per il testo in primo piano grande. */
  --it-label-font-size-xs: var(--it-font-size-1); /** La dimensione di font predefinita per le etichette molto piccole. */
  --it-label-font-size-s: var(--it-font-size-2); /** La dimensione di font predefinita per le etichette piccole. */
  --it-label-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per le etichette medie. */
  --it-label-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per le etichette grandi. */
  --it-label-leading: var(--it-font-leading-1); /** Spazio tra le righe predefinito per le etichette. */
  --it-body-font-weight: var(--it-font-weight-regular);
  --it-caption-font-weight-regular: var(--it-font-weight-regular);
  --it-caption-font-weight-semibold: var(--it-font-weight-semibold);
  --it-lead-font-weight: var(--it-font-weight-regular);
  --it-icon-default: var(--it-color-text-base); /** Colore icona di base */
  --it-icon-primary: var(--it-color-background-primary); /** Colore icona con link */
  --it-icon-primary-hover: var(--it-color-background-primary-hover); /** Colore icona con link status hover */
  --it-icon-primary-active: var(--it-color-background-primary-active); /** Colore icona con link status attivo */
  --it-icon-secondary: var(--it-color-background-secondary); /** Colore icona di supporto */
  --it-icon-secondary-hover: var(--it-color-background-secondary-hover); /** Colore icona di supporto - status hover */
  --it-icon-secondary-active: var(--it-color-background-secondary-active); /** Colore icona di supporto - status attivo */
  --it-icon-success: var(--it-color-background-success); /** Colore icona di supporto per azioni avvenute con successo */
  --it-icon-success-hover: var(--it-color-background-success-hover); /** Colore icona di supporto per azioni avvenute con successo - status hover */
  --it-icon-success-active: var(--it-color-background-success-active); /** Colore icona di supporto per azioni avvenute con successo - status attivo */
  --it-icon-warning: var(--it-color-background-warning); /** Colore icona di supporto per comunicazioni che richiedono attenzione */
  --it-icon-warning-hover: var(--it-color-background-warning-hover); /** Colore icona di supporto per comunicazioni che richiedono attenzione - status hover */
  --it-icon-warning-active: var(--it-color-background-warning-active); /** Colore icona di supporto per comunicazioni che richiedono attenzione - status attivo */
  --it-icon-danger: var(--it-color-background-danger); /** Colore icona di supporto per azioni non andate a buon fine - status hover */
  --it-icon-danger-hover: var(--it-color-background-danger-hover); /** Colore icona di supporto per azioni non andate a buon fine - status hover */
  --it-icon-danger-active: var(--it-color-background-danger-active); /** Colore icona di supporto per azioni non andate a buon fine - status hover */
  --it-icon-inverse: var(--it-color-background-inverse); /** Colore icona dsabilitata */
  --it-icon-disabled: var(--it-color-link-disabled); /** Colore icona disabilitata. */
}