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

    /* Color styles */
    --black: #000000;
    --white: #FFFFFF;
    --primary: #F40;
    --primary-900: #A92D00;
    --gray-900: #151515;
    --gray-800: #363636;
    --gray-700: #535353;
    --gray-600: #737373;
    --gray-500: #858585;
    --gray-400: #8A8A8A;
    --gray-300: #A2A2A2;
    --gray-200: #A7A7A7;
    --gray-100: #BEBEBE;
    --gray-50: #DADADA;
    --border-default: #3C3C3C;
    --border-hover: #D9D9D9;
    --border-focus: #3182F6;
    --semantic-error: #F04452;
    --semantic-success: #04C09E;

    --gradient: linear-gradient(90deg, #F40 0%, #FF7C4D 100%);
    
    /* Text-size styles */
    --display-hero: 5rem; /* 80px */
    --display-hero2: 1.75rem; /* 32px */
    --heading-1: 3.125rem; /* 50px */
    --heading-2: 1.875rem; /* 30px */
    --heading-3: 1.5rem; /* 24px */
    --heading-4: 1.25rem; /* 20px */
    --text-22: 1.375rem; /* 22px */
    --text-20: 1.25rem; /* 20px */
    --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 : 16px;
    --card-gap-sm : 12px;
    --card-gap-lg : 24px;
    --card-gap-xl : 32px;

    --rounded-sm: 12px;
    --rounded-md: 20px;
    --rounded-full: 200px;

    /* 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;
    }
}