:root {
    --color-primary: #241a4e;
    --color-primary-rgb: 50, 36, 108;
    --color-primary-hover: #32246c;
    --color-secondary: #665f83;
    --color-secondary-rgb: 115, 107, 147;
    --color-secondary-hover: #736b93;
    --color-rough: #004909;
    --color-rough-rgb: 0, 73, 9;
    --color-rough-hover: #00750e;
    --color-water: #1eadcd;
    --color-water-rgb: 30, 173, 205;
    --color-water-hover: #27bedf;
    --color-black: #060016;
    --color-black-hover: #1a1a1a;
    --color-black-rgb: 0, 0, 0;
    --color-white: #ffffff;
    --color-white-hover: var(--color-light-grey);
    --color-white-rgb: 255, 255, 255;
    --color-light-grey: #f5f5f5;
    --color-dark-grey: #9d9ca0;

    --backdrop: var(--color-light-grey);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Bootstrap overrides */
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--color-primary-rgb);
    --bs-link-hover-color: var(--color-primary-hover);
}