/* This file needs to be the first file rendered in the DOM before any other
CSS files, to ensure the :root variables are present before the other CSS render */

:root {
    /* Slate */
    --color-slate-50: #e5ecf1;
    --color-slate-100: #cad9e2;
    --color-slate-200: #b0c6d4;
    --color-slate-300: #96b3c5;
    --color-slate-400: #7ba0b7;
    --color-slate-500: #618da8;
    --color-slate-600: #4c728a;
    --color-slate-700: #416276;
    --color-slate-800: #334c5c;
    --color-slate-900: #243642;
    /* Midnight */
    --color-midnight-50: #e3e8ed;
    --color-midnight-100: #d2d6da;
    --color-midnight-200: #afb6be;
    --color-midnight-300: #6a7786;
    --color-midnight-400: #25394d;
    --color-midnight-500: #051b33;
    --color-midnight-600: #00172f;
    --color-midnight-700: #020f1c;
    --color-midnight-800: #000c1a;
    --color-midnight-900: #01080f;
    /* Red */
    --color-red-50: #fef3f5;
    --color-red-100: #fce6ea;
    --color-red-200: #f9c2cc;
    --color-red-300: #f391a4;
    --color-red-400: #ee5e79;
    --color-red-500: #e92e51;
    --color-red-600: #e4002b;
    --color-red-700: #c20025;
    --color-red-800: #a2001f;
    --color-red-900: #820019;
    /* Green */
    --color-green-50: #f3faf6;
    --color-green-100: #e6f5ed;
    --color-green-200: #c2e8d4;
    --color-green-300: #91d6b2;
    --color-green-400: #5ec38f;
    --color-green-500: #2eb06d;
    --color-green-600: #009f4d;
    --color-green-700: #008741;
    --color-green-800: #007137;
    --color-green-900: #005b2c;
    /* Yellow */
    --color-yellow-50: #fffbf3;
    --color-yellow-100: #fff7e6;
    --color-yellow-200: #ffebc2;
    --color-yellow-300: #ffdc91;
    --color-yellow-400: #ffcb5e;
    --color-yellow-500: #ffbc2e;
    --color-yellow-600: #ffad00;
    --color-yellow-700: #d99300;
    --color-yellow-800: #b57b00;
    --color-yellow-900: #916300;
    /* Gray */
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #f0f0f0;
    --color-gray-300: #e3e3e3;
    --color-gray-400: #d9d9d9;
    --color-gray-500: #bfbfbf;
    --color-gray-600: #8c8c8c;
    --color-gray-700: #595959;
    --color-gray-800: #404040;
    --color-gray-900: #212121;
    /* White */
    --color-white: #ffffff;
    /* Black */
    --color-black: #000000;
    /* Sunshine */
    --color-sunshine: #fff39f;
    /* Coral */
    --color-coral: #fb3b45;
    /* Theme Colors */
    --color-primary: var(--color-slate-600);
    --color-primary-light: var(--color-slate-50);
    --color-light: var(--color-gray-100);
    --color-dark: var(--color-slate-900);
    --color-secondary: var(--color-midnight-600);
    --color-accent-1: var(--color-sunshine);
    --color-accent-2: var(--color-coral);
}