:root{
    --content: #ffffff;
    --alternate: #f7f8f9;
    --artboard: #f0f2f4;
    --black: #424548;
    --darkGray: #676b6f;
    --midGray: #8d9196;
    --lightGray: #c2c4c7;
    --neutral10: #e8ebee;
    --neutral15: #d9dee3;
    --neutral20: #cad1d8;
    --neutral30: #aeb8c2;
    --neutral40: #919eac;
    --neutral50: #738596;
    --neutral60: #5c6b7a;
    --neutral70: #46525d;
    --neutral80: #303840;
    --primary: #4678aa;
    --primaryDark: #2f5274;
    --primaryMid: #759ec7;
    --primaryLight: #d1ddeb;
    --accent: #243156;
    --accentDark: #00082d;
    --accentMid: #417aec;
    --accentLight: #e8effc;
    --notification: #f5007a;
    --success: #9cd638;
    --warning: #fbbf3c;
    --error: #ee5244;

    --fontFamily: 'Rubik';
    --fontSizeHeading: 32px;
    --fontSizeSubheading: 24px;
    --fontSizeBodyTextLarge: 18px;
    --fontSizeBodyTextRegular: 16px;
    --fontSizeSecondaryText: 15px;
    --fontSizeMicroText: 14px;
    --fontSizeXSText: 13px;
    --fontSizeXXSText: 12px;
    --fontSizeXXXSText: 11px;

    --fontWeightLight: 300;
    --fontWeightRegulare: 400;
    --fontWeightMedium: 500;
    --fontWeightBold: 600;

    --borderRadiusMin: 0;
    --borderRadiusSmall: 4px;
    --borderRadiusMedium: 8px;
    --borderRadiusLarge: 16px;
    --borderRadiusExtraLarge: 24px;
    --borderRadiusMax: 100%;
}

/* Stili per Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {

    }
}

/* Stili per Mobile (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --fontSizeHeading: 28px;
        --fontSizeSubheading: 20px;
        --fontSizeBodyTextLarge: 16px;
        --fontSizeBodyTextRegular: 15px;
        --fontSizeSecondaryText: 14px;
        --fontSizeMicroText: 13px;
        --fontSizeXSText: 12px;
        --fontSizeXXSText: 11px;
    }
}