@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html, body, #root {
        @apply w-full h-full overflow-hidden bg-gray-50 text-gray-900;
    }

    /* Setup default transitions for elements */
    * {
        transition: background-color var(--transition-duration),
        border-color var(--transition-duration),
        box-shadow var(--transition-duration);
    }

    /* Disable user selection to make it more "app-like" */
    :not(input):not(textarea),
    :not(input):not(textarea)::after,
    :not(input):not(textarea)::before {
        -webkit-user-select: none;
        user-select: none;
        cursor: default;
    }

    :root {
        color-scheme: light dark;
        --transition-duration: 100ms ease-in-out;
        --color-white: 255 100% 100%;
        --color-black: 255 0% 0%;
    }
}