@layer base {
    :root {
        --color-primary-50: 206 221 250;
        --color-primary-100: 206 221 250;
        --color-primary-200: 57 101 189;
        --color-primary-300: 57 101 189;
        --color-primary-400: 23 67 154;
        --color-primary-500: 23 67 154;
        --color-primary-600: 23 67 154;
        --color-primary-700: 8 49 129;
        --color-primary-800: 8 49 129;
        --color-primary-900: 8 49 129;

        --color-secondary-50: 255 248 201;
        --color-secondary-100: 255 248 201;
        --color-secondary-200: 255 236 110;
        --color-secondary-300: 255 236 110;
        --color-secondary-400: 253 220 5;
        --color-secondary-500: 253 220 5;
        --color-secondary-600: 253 220 5;
        --color-secondary-700: 202 175 0;
        --color-secondary-800: 202 175 0;
        --color-secondary-900: 202 175 0;

        --color-gray-50: 250 250 250;
        --color-gray-100: 244 244 244;
        --color-gray-200: 228 228 228;
        --color-gray-300: 212 212 212;
        --color-gray-400: 161 161 170;
        --color-gray-500: 113 113 122;
        --color-gray-600: 82 82 91;
        --color-gray-700: 26 44 80;
        --color-gray-800: 15 28 53;
        --color-gray-900: 13 23 44;

        --color-navigation-bg: var(--color-primary-500);
        --color-navigation-border: var(--color-primary-700);
        --color-navigation-text: 255 255 255;
        --color-navigation-hover: var(--color-secondary-500);
        --color-navigation-active: var(--color-secondary-500);
    }
}