:root {
    --color-brand-50: #eff7ff;
    --color-brand-100: #dcebfd;
    --color-brand-200: #c0defd;
    --color-brand-300: #95c9fb;
    --color-brand-400: #63abf7;
    --color-brand-500: #3f8bf2;
    --color-brand-600: #296de7;
    --color-brand-700: #225ada; /* Validates AA (WCAG) as background for white text */
    --color-brand-800: #2148ac;
    --color-brand-900: #203f88;
    --color-brand-950: #182853;

    /* Gray colors */
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-gray-950: #0a0a0a;

    /*  Neutral colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Utility */
    --color--red: #dc2323;

    /* Other */
    --color-beige: #e7e3d8;
    --color-blue-gray: #1e3649;
}