@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(--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;
}

button {
    cursor: pointer;
}

// Text selection
::selection {
    color: var(--theme-bg);
    background: var(--theme-fg);
}
::-moz-selection {
    color: var(--theme-bg);
    background: var(--theme-fg);
}
