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

body {
    margin: 0;

    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;

    font-variant-numeric: lining-nums proportional-nums ordinal;
    font-feature-settings: 'dlig' on;

    // Standard transitions
    --td: 500ms;
    --te: var(--ease-out-expo);
}

a {
    text-decoration: none;
    color: inherit;
}

// Type
.s1 {
    @include s1;
}
.s2 {
    @include s2;
}
.s3 {
    @include s3;
}
.s4 {
    @include s4;
}
.h1,
h1 {
    @include h1;
}
.h2,
h2 {
    @include h2;
}
.h3,
h3 {
    @include h3;
}
.h4,
h4 {
    @include h4;
}
.h5,
h5 {
    @include h5;
}
.h6,
h6 {
    @include h6;
}
.em1 {
    @include em1;
}
.em2 {
    @include em2;
}
.em3 {
    @include em3;
}
.q1 {
    @include q1;
}
.p-l {
    @include p-l;
}
.p,
body,
p,
a,
button,
input {
    @include p;
}
.p-s {
    @include p-s;
}
.p-xs {
    @include p-xs;
}
.p-xxs {
    @include p-xxs;
}

// Rich text styling
.entry {
    img {
        max-width: 100%;
        height: auto;
    }
    p {
        min-height: 1px;
    }
    a {
        text-decoration: underline;
    }
    & > * {
        margin-bottom: 1em;
        margin-top: 1em;
    }
    & > *:first-child {
        margin-top: 0;
    }
    & > *:last-child {
        margin-bottom: 0;
    }

    ul,
    ol {
        li {
            margin-bottom: 1em;
            width: desktop-vw(577px);

            @include mobile {
                width: 100%;
            }
        }
    }
    ul {
        list-style: disc;
        padding-left: 1em;
    }
    ol {
        counter-reset: list;

        li::before {
            counter-increment: list;
            content: counter(list);
            padding-right: 0.5em;
            font-variant-numeric: lining-nums proportional-nums;
        }
    }
}

// Generic animations
@keyframes blink {
    5% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
}
@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeup {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}