@import "tailwindcss";

:root {
    /* Colors */
    --color-light-gray-blue: #f4f7fd;
    --color-light-aqua: #e0f0f4;
    --color-light-white-blue: #f5fbfc;
    --color-light-whitesmoke: #fcfdff;
    --color-dark: #1c1c1c;
    --mantine-color-dark-7-5: #212121;
    /* Shadows */
    --light-shadow: 2px 2px 5px darkgray;
    --light-thick-shadow: 4px 4px 10px darkgray;
    --dark-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
    --dark-thick-shadow: 5px 5px 10px 1px var(--mantine-color-dark-6);
    /* Heights */
    --page-height: calc(100vh - (var(--mantine-spacing-md) * 2));
}

body {
    @mixin light {
        background-color: var(--color-light-gray-blue);
    }
}