/* Variables */

:root {
    --color-gray-100: #000000;
    --color-gray-50: #808080;
    --color-gray-10: #f5f5f5;
    --color-gray-0: #ffffff;
    --color-red-100: #772228;
    --color-red-80: #a45056;
    --color-red-50: #dd4422;
    --color-red-20: #fadee0;
    --color-orange-100: #733d0b;
    --color-orange-50: #f37704;
    --color-orange-20: #fde4cd;
    --color-green-100: #405711;
    --color-green-50: #669900;
    --color-green-20: #dde9c7;

    --color-blue-100: #005777;
    --color-blue-50: #0088bb;
    --color-blue-30: #a1d5e8;
    --color-blue-20: #dbeef5;
    --color-yellow-100: #443300;
    --color-yellow-50: #ffcc00;

    --shadow-red: 0 2px 16px -4px #77222880;
    --shadow-orange: 0 2px 16px -4px #733d0b80;
    --shadow-green: 0 2px 16px -4px #40571180;
    --shadow-blue: 0 2px 16px -4px #00577780;
    --shadow-hover: 0 2px 16px -8px rgb(0 0 0 / 30%);
    --shadow-text: 0 2px 8px rgb(0 0 0 / 30%);

    --color-brand-100: var(--color-blue-100);
    --color-brand-80:  var(--color-blue-80, --color-blue-50);
    --color-brand-50:  var(--color-blue-50);
    --color-brand-20:  var(--color-blue-20);
    --color-accent-100: var(--color-yellow-100);
    --color-accent-50: var(--color-yellow-50);
    --shadow: var(--shadow-blue);
}

::selection {
    color: var(--color-gray-0);
    background-color: var(--color-brand-50);
}