@use 'colors' as *;
@use 'themes' as *;
@use 'easings' as *;
@use 'reset' as *;
@use 'layers' as *;
@use 'functions' as *;
@use 'utils' as *;
@use 'fonts' as *;
@use 'font-style' as *;
@use 'layout' as *;
@use 'scroll' as *;
@use 'transitions' as *;

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

    background: var(--white);
    color: var(--black);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
}

// Type
.h1,
h1,
h2,
h3,
h4,
h5,
h6 {
    @include h1;

    &.mono {
        @include h1-mono;
    }
}
.p,
p,
a,
button,
input,
pre,
span,
label,
li {
    @include p;
}
.bold {
    font-weight: 700;
}

#app {
    min-height: 100vh;
}

@keyframes blink {
    5% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
}

@keyframes bonk {
    0% {
        transform: rotate(calc(var(--bonk-angle) * -1));
    }
    50% {
        transform: rotate(var(--bonk-angle));
    }
}