:root {
    --color-primary-50: #FEDBDD;
    --color-primary-100: #F5B9BB;
    --color-primary-200: #E7898C;
    --color-primary-300: #E06266;
    --color-primary-400: #D83A40;
    --color-primary-500: #D0131A;
    --color-primary-600: #AD1016;
    --color-primary-700: #8B0D11;
    --color-primary-800: #680A0D;
    --color-primary-900: #450609;
  
    --color-secondary-50: #D6DFEC;
    --color-secondary-100: #BAC9DF;
    --color-secondary-200: #97AECF;
    --color-secondary-300: #7593BF;
    --color-secondary-400: #5378AF;
    --color-secondary-500: #305D9F;
    --color-secondary-600: #284E84;
    --color-secondary-700: #203E6A;
    --color-secondary-800: #182F50;
    --color-secondary-900: #101F35;
  
    --color-neutral-50: #F7F9FB;
    --color-neutral-100: #F1F4F9;
    --color-neutral-200: #EAEFF5;
    --color-neutral-300: #E4EAF2;
    --color-neutral-400: #DDE4EF;
    --color-neutral-500: #D6DFEC;
    --color-neutral-600: #B2BAC5;
    --color-neutral-700: #737B84;
    --color-neutral-800: #474A4F;
    --color-neutral-900: #2B2D2F;

    --color-success-dark: #166534;
    --color-success: #16a34a;
    --color-success-light: #bbf7d0;
  
    --color-error-dark: #991b1b;
    --color-error: #ef4444;
    --color-error-light: #fecaca;
  
    --color-warn-dark: #9a3412;
    --color-warn: #f97316;
    --color-warn-light: #fed7aa;
  
    --color-info-dark: #075985;
    --color-info: #0ea5e9;
    --color-info-light: #bae6fd;

    --color-allerta-verde: #92D048;
    --color-allerta-giallo: #FFFE54;
    --color-allerta-arancione: #F2A83B;
    --color-allerta-rosso: #EA3223;
  
    --color-brand-00: #D0131A;
    --color-brand-01: #2B2B2B;
  
    --color-salvia: #4A7769;
    --color-bando-aperto: #A1CCB1;
    --color-bando-in-attivazione: #FCD07B;
    --color-archiviato: #1F2937;
  
    --color-focusring: #025ECC;

    --color-social-facebook: #1877F2;
    --color-social-instagram: #5851db;
    --color-social-linkedin: #0077B5;
    --color-social-x: #000000;
    --color-social-youtube: #FF0000;

    /* SEMANTIC COLOR UTILITIES - CONTENT TEXT */
    --color-content-01: var(--color-neutral-900);
    --color-content-02: var(--color-secondary-500);
    --color-content-03: var(--color-neutral-800);
    --color-content-placeholder: var(--color-secondary-500);
    --color-input-placeholder: var(--color-secondary-500);
    --color-content-05: var(--color-neutral-700);
    --color-content-inverse: var(--color-neutral-50);
    --color-content-disabled: var(--color-neutral-600);
    --color-content-primary: var(--color-primary-500);
    --color-content-primary-dark: var(--color-primary-900);
    --color-content-primary-light: var(--color-primary-100);
    --color-content-secondary: var(--color-secondary-500);
    --color-content-secondary-dark: var(--color-secondary-900);
    --color-content-secondary-light: var(--color-secondary-100);
    --color-content-error: var(--color-error-dark);
    --color-content-warn: var(--color-warn-dark);
    --color-content-info: var(--color-info-dark);
    --color-content-success: var(--color-success-dark);
    --color-content-category: var(--color-primary-600);

    /* SEMANTIC COLOR UTILITIES - BUTTON */
    --color-button-primary: var(--color-primary-500);
    --color-button-primary-hover: var(--color-primary-600);
    --color-button-primary-active: var(--color-primary-700);
    --color-button-secondary: var(--color-secondary-500);
    --color-button-secondary-hover: var(--color-secondary-600);
    --color-button-secondary-active: var(--color-secondary-700);
    --color-button-disabled: var(--color-secondary-300);
    --color-button-outline: var(--color-primary-500);
    --color-button-outline-hover: var(--color-primary-600);
    --color-button-outline-active: var(--color-primary-700);
    --color-button-only-text: var(--color-primary-500);
    --color-button-only-text-hover: var(--color-primary-600);
    --color-button-only-text-active: var(--color-primary-700);
    --color-button-inverted: var(--color-neutral-50);
    --color-button-inverted-hover: var(--color-neutral-50);
    --color-button-inverted-focus: var(--color-neutral-50);
    --color-button-inverted-active: var(--color-neutral-100);
    --color-button-inverted-text: var(--color-content-02);
    --color-button-inverted-text-hover: var(--color-content-01);
    --color-button-inverted-text-focus: var(--color-content-02);
    --color-button-inverted-text-active: var(--color-content-02);
    --color-button-text-inverted: transparent;
    --color-button-text-inverted-hover: rgba(0, 0, 0, 0.5);
    --color-button-text-inverted-focus: transparent;
    --color-button-text-inverted-active: rgba(0, 0, 0, 0.2);
    --color-button-text-inverted-text: var(--color-content-inverse);
    --color-button-text-inverted-text-hover: var(--color-content-inverse);
    --color-button-text-inverted-text-focus: var(--color-content-inverse);
    --color-button-text-inverted-text-active: var(--color-content-inverse);

    /* SEMANTIC COLOR UTILITIES - LINK */
    --color-link-primary: var(--color-primary-500);
    --color-link-visited: var(--color-primary-900);
    --color-link-inverse: var(--color-primary-400);
    --color-link-primary-hover: var(--color-primary-600);
    --color-link-inverse-hover: var(--color-primary-200);
    --color-link-inverse-visited: var(--color-primary-100);
    --color-link-secondary: var(--color-secondary-500);
    --color-link-secondary-hover: var(--color-secondary-500);
    --color-link-secondary-focus: var(--color-secondary-500);
    --color-link-secondary-active: var(--color-neutral-900);

    /* SEMANTIC COLOR UTILITIES - BACKGROUND */
    --color-background-01: var(--color-neutral-50);
    --color-background-02: var(--color-neutral-100);
    --color-background-03: var(--color-neutral-300);
    --color-background-04: var(--color-neutral-400);
    --color-background-05: var(--color-neutral-700);
    --color-background-06: var(--color-neutral-800);
    --color-background-07: var(--color-neutral-900);
    --color-background-08: var(--color-secondary-600);
    --color-background-09: var(--color-secondary-800);
    --color-background-primary: var(--color-primary-500);
    --color-background-primary-light: var(--color-primary-50);
    --color-background-inverse: var(--color-neutral-50);
    --color-background-primary-dark: var(--color-primary-900);
    --color-background-secondary: var(--color-secondary-500);
    --color-background-secondary-light: var(--color-secondary-200);
    --color-background-secondary-dark: var(--color-secondary-900);

    /* SEMANTIC COLOR UTILITIES - BORDER */
    --color-border-gray-01: var(--color-neutral-300);
    --color-divide-gray-01: var(--color-neutral-300);
    --color-border-gray-02: var(--color-neutral-400);
    --color-divide-gray-02: var(--color-neutral-400);
    --color-border-gray-03: var(--color-neutral-600);
    --color-divide-gray-03: var(--color-neutral-600);
    --color-border-gray-04: var(--color-neutral-800);
    --color-divide-gray-04: var(--color-neutral-800);
    --color-border-input: var(--color-neutral-700);
    --color-border-primary: var(--color-primary-500);
    --color-divide-primary: var(--color-primary-500);
    --color-border-secondary: var(--color-secondary-500);
    --color-divide-secondary: var(--color-secondary-500);
    --color-border-inverse: var(--color-neutral-50);
    --color-divide-inverse: var(--color-neutral-50);

    /* DEFINE SPACING UNIT */
    --spacing-base: 0.25rem; /* 4px/16 = 0.25 - Valore base configurabile */
    
    /* Spaziature basate sui fattori moltiplicativi forniti */
    --spacing-0: calc(var(--spacing-base) * 0);       /* 0x */
    --spacing-0-5: calc(var(--spacing-base) * 0.5);   /* 0.5x */
    --spacing-1: calc(var(--spacing-base) * 1);       /* 1x */
    --spacing-1-5: calc(var(--spacing-base) * 1.5);   /* 1.5x */
    --spacing-2: calc(var(--spacing-base) * 2);       /* 2x */
    --spacing-2-5: calc(var(--spacing-base) * 2.5);   /* 2.5x */
    --spacing-3: calc(var(--spacing-base) * 3);       /* 3x */
    --spacing-3-5: calc(var(--spacing-base) * 3.5);   /* 3.5x */
    --spacing-4: calc(var(--spacing-base) * 4);       /* 4x */
    --spacing-5: calc(var(--spacing-base) * 5);       /* 5x */
    --spacing-6: calc(var(--spacing-base) * 6);       /* 6x */
    --spacing-7: calc(var(--spacing-base) * 7);       /* 7x */
    --spacing-8: calc(var(--spacing-base) * 8);       /* 8x */
    --spacing-9: calc(var(--spacing-base) * 9);       /* 9x */
    --spacing-10: calc(var(--spacing-base) * 10);     /* 10x */
    --spacing-11: calc(var(--spacing-base) * 11);     /* 11x */
    --spacing-12: calc(var(--spacing-base) * 12);     /* 12x */
    --spacing-14: calc(var(--spacing-base) * 14);     /* 14x */
    --spacing-16: calc(var(--spacing-base) * 16);     /* 16x */
    --spacing-20: calc(var(--spacing-base) * 20);     /* 20x */
    --spacing-24: calc(var(--spacing-base) * 24);     /* 24x */
    --spacing-28: calc(var(--spacing-base) * 28);     /* 28x */
    --spacing-32: calc(var(--spacing-base) * 32);     /* 32x */
    --spacing-36: calc(var(--spacing-base) * 36);     /* 36x */
    --spacing-40: calc(var(--spacing-base) * 40);     /* 40x */
    --spacing-44: calc(var(--spacing-base) * 44);     /* 44x */
    --spacing-48: calc(var(--spacing-base) * 48);     /* 48x */
    --spacing-52: calc(var(--spacing-base) * 52);     /* 52x */
    --spacing-56: calc(var(--spacing-base) * 56);     /* 56x */
    --spacing-60: calc(var(--spacing-base) * 60);     /* 60x */
    --spacing-64: calc(var(--spacing-base) * 64);     /* 64x */
    --spacing-72: calc(var(--spacing-base) * 72);     /* 72x */
    --spacing-80: calc(var(--spacing-base) * 80);     /* 80x */
    --spacing-96: calc(var(--spacing-base) * 96);     /* 96x */

    /* GRADIENTS     */
    --gradient-01: linear-gradient(6deg, #FBFBFB 2.33%, #E7F3E4 92.69%);
    --gradient-02: linear-gradient(26deg, #F2FAFF -0.02%, #D2E9FF 74.53%);
    --gradient-03: linear-gradient(26deg, #FFFAF2 -0.02%, #FFEDD2 74.53%);
    --gradient-04: linear-gradient(133deg, #FFF 1.61%, #EEF3FA 98.28%);
    --gradient-05: linear-gradient(271deg, rgba(255, 153, 0, 0.00) -0.54%, rgba(134, 91, 7, 0.60) 48.53%, rgba(24, 15, 5, 0.60) 81.24%);

    /* DEFINE PROJECT FONT SETTINGS */
    --fontfamily-sans: 'Open Sans';

    --fontsize-text-xs: 0.75rem; /* 12px */
    --fontsize-text-sm: 0.875rem; /* 14px */
    --fontsize-text-base: 1rem; /* 16px */
    --fontsize-text-lg: 1.125rem; /* 18px */
    --fontsize-text-xl: 1.25rem; /* 20px */
    --fontsize-text-2xl: 1.5rem; /* 24px */
    --fontsize-text-3xl: 1.875rem; /* 30px */
    --fontsize-text-4xl: 2.25rem; /* 36px */
    --fontsize-text-5xl: 3rem; /* 48px */
    --fontsize-text-6xl: 3.75rem; /* 60px */
    --fontsize-text-7xl: 4.5rem; /* 72px */
    --fontsize-text-8xl: 6rem; /* 96px */
    --fontsize-text-9xl: 8rem; /* 128px */

    /* OTHER TYPOGRAPHY UTILITIES */
    --fontsize-text-40px: 2.5rem; /* 40px */
    --fontsize-text-42px: 2.625rem; /* 42px */


    /* Custom Typography Properties */
    --custom-prose-body: var(--color-neutral-800);
    --custom-prose-headings: var(--color-neutral-900);
    --custom-prose-lead: var(--color-neutral-700);
    --custom-prose-links: var(--color-secondary-500);
    --custom-prose-bold: var(--color-neutral-900);
    --custom-prose-counters: currentColor;
    --custom-prose-bullets: currentColor;
    --custom-prose-hr: var(--color-neutral-600);
    --custom-prose-quotes: var(--color-neutral-900);
    --custom-prose-quote-borders: var(--color-neutral-600);
    --custom-prose-captions: var(--color-neutral-800);
    --custom-prose-code: var(--color-neutral-900);
    --custom-prose-pre-code: var(--color-neutral-100);
    --custom-prose-pre-bg: var(--color-neutral-900);
    --custom-prose-th-borders: var(--color-neutral-500);
    --custom-prose-td-borders: var(--color-neutral-400);
    
    /* Invert variants */
    --custom-prose-invert-body: var(--color-neutral-200);
    --custom-prose-invert-headings: var(--color-white);
    --custom-prose-invert-lead: var(--color-neutral-300);
    --custom-prose-invert-links: var(--color-white);
    --custom-prose-invert-bold: var(--color-white);
    --custom-prose-invert-counters: var(--color-neutral-400);
    --custom-prose-invert-bullets: var(--color-neutral-600);
    --custom-prose-invert-hr: var(--color-neutral-700);
    --custom-prose-invert-quotes: var(--color-neutral-100);
    --custom-prose-invert-quote-borders: var(--color-neutral-700);
    --custom-prose-invert-captions: var(--color-neutral-400);
    --custom-prose-invert-code: var(--color-white);
    --custom-prose-invert-pre-code: var(--color-neutral-300);
    --custom-prose-invert-pre-bg: rgba(0, 0, 0, 0.5);
    --custom-prose-invert-th-borders: var(--color-neutral-600);
    --custom-prose-invert-td-borders: var(--color-neutral-700);
}