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

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

    background: var(--ivory);

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

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

// Type
.h1,
h1 {
    @include h1;
}
.h2,
h2 {
    @include h2;
}
.h3,
h3 {
    @include h3;
}
.h4,
h4 {
    @include h4;
}
.p,
p,
a,
li {
    @include p;
}
.label,
label,
button,
pre {
    @include label;
}
.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);
}