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

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

/* =============================================================================
 * RL Design System — token semantici (--rl-*)
 * Spostati qui da style_theme.scss: appartengono al layer TOKEN (theme.css),
 * così il theme.css per-tenant (pubblicato su CDN dal CMS) li trasporta e sono
 * personalizzabili dall'editor temi. I valori che delegano a var(--it-*)
 * seguono automaticamente i colori scelti dal tenant.
 * Mantenere manualmente (non rigenerare dai token Figma senza reintegrarli).
 * ============================================================================= */
:root {
  /* Hero Canale Tematico — varianti sfondo */
  --rl-surface-card-special-1: var(--it-primary, #297a38);
  --rl-surface-card-special-2: #005d31;
  --rl-surface-card-special-3: #187a6a;
  --rl-surface-card-special-4: #009e3d;
  --rl-surface-card-special-5: #184921;
  /* Surface */
  --rl-surface-primary-green: var(--it-primary);
  --rl-surface-primary-light: var(--it-primary-light);
  --rl-surface-bg-light: var(--it-primary-lighter);
  --rl-color-green-50: var(--it-primary-lighter);
  --rl-surface-brand-v2: #95c11f;
  --rl-surface-brand-v3: #52ae32;
  --rl-surface-brand-v6: #08b0a0;
  --rl-surface-brand-v8: #00362e;
  --rl-surface-opacity-v9-15: #dcebe9;
  --rl-rating-decor: #95c11f;
  /* Text / icon */
  --rl-text-icon-primary: var(--it-base);
  --rl-text-icon-invert: var(--it-inverse);
  --rl-text-icon-secondary: var(--it-secondary);
  --rl-text-icon-disabled: var(--it-disabled);
  --rl-text-icon-labels: #556875;
  --rl-text-icon-status-hover: var(--it-primary-hover, #184921);
  --rl-text-icon-status-positive: #62af60;
  --rl-text-icon-primary-green: var(--it-primary);
  /* Border */
  --rl-border-color-primary: var(--it-primary);
  --rl-border-color-tertiary: var(--it-slate-85);
  --rl-border-color-invert: var(--it-inverse);
  --rl-color-opacity-white-50: color-mix(in srgb, var(--it-inverse) 50%, transparent);
  --rl-color-grey-700: #4a5b66;
  /* Bottoni — stati interattivi */
  --rl-surface-status-hover: var(--it-primary-hover, #184921);
  --rl-surface-status-pressed: var(--rl-surface-brand-v8);
  --rl-surface-status-disabled: #f6f7f9;
  --rl-surface-status-hover-neutral: #e2e5e8;
  --rl-text-icon-status-disabled: #556875;
  --rl-border-color-status-hover: var(--it-primary-hover, #184921);
  --rl-border-color-status-pressed: var(--rl-surface-brand-v8);
  --rl-text-icon-status-pressed: var(--rl-surface-brand-v8);
  --rl-border-color-status-disabled-light: var(--bs-border-color, #d9e0e3);
  --rl-border-color-status-disabled-dark: var(--rl-color-opacity-white-50);
  --rl-border-color-status-pressed-dark: var(--bs-border-color, #d9e0e3);
  --rl-border-color-focus-ring: var(--rl-surface-brand-v8);
  /* Status (validazione form) */
  --rl-surface-status-positive-20: #e0efdf;
  --rl-surface-status-warning-20: #fcebd7;
  --rl-border-color-status-warning: #f19937;
  --rl-surface-status-negative-20: #f4d8d6;
  --rl-border-color-status-negative: #c83a32;
  /* Font */
  --rl-font-family: var(--bs-font-sans-serif);
  --rl-font-size-xs: calc(var(--it-font-size-3) * 1px);
  --rl-font-size-s: calc(var(--it-font-size-4) * 1px);
  --rl-font-size-m: calc(var(--it-font-size-5) * 1px);
  --rl-font-size-ml: calc(var(--it-font-size-6) * 1px);
  --rl-font-size-l: calc(var(--it-font-size-8) * 1px);
  --rl-font-size-xl: calc(var(--it-font-size-9) * 1px);
  --rl-font-weight-regular: 400;
  --rl-font-weight-semibold: 600;
  --rl-font-weight-bold: 700;
  --rl-line-height-base: calc(var(--it-line-height-4) * 1px);
  /* Altezza header del tema (slim bar + barra bianca) */
  --rl-header-height: 137px;
  /* Offset sticky effettivo dopo lo scroll iniziale (barra slim scrollata via) */
  --rl-header-sticky-height: 90px;
}

@media (max-width: 992px) {
  :root {
    --rl-header-height: 112px;
  }
}