:root {
    --c-error: #ffb4ab;
    --c-on-error: #690005;
    --c-error-container: #93000a;
    --c-on-error-container: #ffdad6;

    --c-outline-50: rgba(143, 144, 154, 0.5);
}

@media (prefers-color-scheme: light) {
    :root {
        --c-error: #ba1a1a;
        --c-on-error: #ffffff;
        --c-error-container: #ffdad6;
        --c-on-error-container: #410002;

        --c-outline-50: rgba(118, 118, 128, 0.5);
    }
}


body {
    background-color: var(--c-background);
    color: var(--c-on-background);
    font-family: Inter, "Inter Nerd Font", sans-serif;
}


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

.progress {
    animation: progress 1s infinite linear;
}

.left-right {
    transform-origin: 0% 50%;
}

@keyframes progress {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}