@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 {
    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 {
    @include h1;
}
.h6,
h6,
dd {
    @include h6;
}
.p,
p,
a,
button,
input,
pre,
span {
    @include p;
}
.p-small {
    @include p-small;
}
.label,
dt {
    @include label;
}
.code,
code {
    @include code;
}

/* DL styling */
dl {
    grid-template-columns: desktop-vw(40px) 1fr;
    display: grid;
    align-items: center;
    padding-top: desktop-vw(8px);
}

#app {
    min-height: 100vh;
}