:root {
    --container-x-indent: 32px;

    --font-family: 'Inter', Arial, sans-serif;
    --text-letter-spacing: -0.5px;

    --font_200: 200px / 240px 'Inter', Arial, sans-serif;
    --font_150: 150px / 100% 'Inter', Arial, sans-serif;
    --font_60: 60px / 66px 'Inter', Arial, sans-serif;
    --font_48: 48px / 50px 'Inter', Arial, sans-serif;
    --font_36: 36px / 45px 'Inter', Arial, sans-serif;
    --font_32: 32px / 36px 'Inter', Arial, sans-serif;
    --font_30: 30px / 36px 'Inter', Arial, sans-serif;
    --font_20: 20px / 33px 'Inter', Arial, sans-serif;
    --font_24: 24px / 32px 'Inter', Arial, sans-serif;
    --font_18: 18px / 28px 'Inter', Arial, sans-serif;
    --font_16: 16px / 24px 'Inter', Arial, sans-serif;
    --font_14: 14px / 20px 'Inter', Arial, sans-serif;
    --font_12: 12px / 15px 'Inter', Arial, sans-serif;
    
    --font-body-regular: 400 12px/17px 'Inter', Arial, sans-serif;
    --font-body-medium: 500 14px/20px 'Inter', Arial, sans-serif;

    --font_extra_bold: 800;
    --font_bold: 700;
    --font_semi_bold: 600;
    --font_medium: 500;

    --color-orange: #FF6B35;
    --color-light-orange: #FFE4D6;
    --color-light-orange-2: #FFF4E6;
    --color-blind-orange: #FFF7ED4D;
    --color-blind-orange-2: #FFF7ED;
    --color-light-yellow: #FFF9F5;
    --color-default: #4B5563;
    --color-gray-200: #BFC7D4;
    --color-gray-500: #4B5563;
    --color-light-black: #374151;
    /* --color-black: #111827; */
    --color-black: #1A1A1A;
    --color-black-darken: #1A1A1A;
    --color-white: #FFFFFF;
    --color-white-blind: #FFFFFF80;
    --color-gray: #9CA3AF;
    --color-gray-2: #F9FAFB;
    --color-light-gray: #D1D5DB;
    --color-light-gray-2: #E5E7EB;
    --color-light-gray-3: #F4F5F6;
    --color-light-gray-4: #F3F4F6;
    --color-dark-gray: #6B7280;
    --color-dark-gray-2: #DAE0E6;
    --color-green: #16A34A;
    --color-gradient-light-green: linear-gradient(45deg, #D1FAE5 50%, #A7F3D0 120.71%);
    --color-background-button: #F5F5F5;
    --color-blue: #F0F9FF;
    --color-dark-blue: #BAE6FD;
    --color-grays-black: #0D0D0D;
    --color-button-disabled-text: #00000040;
    --color-button-disabled-bg: #0000000A;
    --color-button-disabled-border: #D9D9D9;
    --color-red: #FF0000;
    --color-text-neutral-strong: #16181C;
    --color-text-neutral-medium: rgba(2, 18, 45, 0.6);
    --surface-accent-weak-default: #FFEAE2;
    --surface-neutral-ghost-hover: #051E5014;

    --border-color: #D9D9D9;
    --border-color-green: #86EFAC;

    --animation-speed: .3s;

    --grid-columns-1: minmax(0, 1fr);
    --grid-columns-2: repeat(2, minmax(0, 1fr));
    --grid-columns-3: repeat(3, minmax(0, 1fr));
    --grid-columns-4: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
    :root{
        --container-x-indent: 20px;
    }
}

@media (max-width: 767px) {
    :root{
        --container-x-indent: 16px;
    }
}