:root {
    --scrollbarColor: #0A4297;
    --scrollbarColorBg: #e6ecf4;

    /* Color styles */
    --white: #FFFFFF;
    --primary-900: #0C172B;
    --primary-700: #0A4297;
    --primary-500: #3182F6;
    --primary-100: #D0E4FF;
    --primary-50: #E8F3FF;
    --gray-900: #191F28;
    --gray-800: #333D4B;
    --gray-700: #4E5968;
    --gray-600: #8B95A1;
    --gray-300: #D1D6DB;
    --gray-200: #E5E8EB;
    --gray-100: #F2F4F6;
    --gray-50: #F9FAFB;
    --border-divider: #F2F4F6;
    --border-default: #E5E8EB;
    --border-hover: #D9D9D9;
    --border-focus: #3182F6;
    --semantic-error: #F04452;
    --semantic-success: #04C09E;

    --gradient-primary-left: linear-gradient(95deg, #46DEC0 4.78%, #4D8BFF 49.06%, #C779FF 96%);
    --gradient-primary-right: linear-gradient(271deg, #46DEC0 1.17%, #4D8BFF 48.28%, #C779FF 98.21%);
    --gradient-secondary: linear-gradient(255deg, #C779FF 16.11%, #4D8BFF 83.57%);

    /* Text-size styles */
    --display-hero: 3.5rem; /* 56px */
    --display-hero2: 2rem; /* 32px */
    --heading-1: 2.5rem; /* 40px */
    --heading-2: 2rem; /* 32px */
    --heading-3: 1.5rem; /* 24px */
    --heading-4: 1.25rem; /* 20px */
    --text-22: 1.375rem; /* 22px */
    --text-16: 1rem; /* 15px */
    --text-15: 0.9375rem; /* 15px */
    --text-14: 0.875rem; /* 14px */
    --text-13: 0.8125rem; /* 13px */
    --text-12: 0.75rem; /* 12px */
    --button-lg: 1.125rem; /* 18px */
    --button-default: 1rem; /* 16px */
    --chip: 0.875rem; /* 14px */
    --caption: 0.75rem; /* 12px */

    --card-padding: 20px;

    --card-gap : 20px;
    --card-gap-lg : 29px;

    --rounded-sm: 10px;
    --rounded-md: 20px;

    /* Effect styles */
    --shadow-card:  0px 4px 16px rgba(0, 0, 0, 0.04);
    --shadow-card-hover:  0px 8px 24px rgba(0, 0, 0, 0.08);
}
@media (max-width:768px) {
    :root {
        --display-hero: 2.75rem; /* 48px */
        --display-hero2: 1.5rem; /* 24px */
        --heading-1: 1.875rem; /* 30px */
        --heading-2: 1.75rem; /* 28px */
        --heading-3: 1.25rem; /* 20px */
        --heading-4: 1.125rem; /* 18px */
        --button-lg: 1rem; /* 16px */
        --button-default: 1rem; /* 16px */

        --card-gap : 12px;
        --card-gap-lg : 12px;
    }
}