/* Path: Frontend/src/styles/main.scss */

@use "./reset" as *;
@use "./fonts" as *;

html {
    background-color: var(--bg);

    // transition:
    //     background-color var(--transition-speed) var(--transition-ease),
    //     color var(--transition-speed) var(--transition-ease);

    color: var(--text);
    font-family:
        "Poppins",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;

    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
}

.app-route-shell {
    position: relative;
    width: 100%;
    isolation: isolate;
    overflow-x: clip;
}

.app-route-shell-viewport-locked {
    min-height: 100dvh;
    overflow: clip;
}

.page-transition-stage {
    width: 100%;
    will-change: opacity, transform, filter;
}

.page-fade-slide-enter-active,
.page-fade-slide-exit-active {
    transition:
        opacity 0.2s var(--transition-ease),
        transform 0.24s var(--transition-ease),
        filter 0.24s var(--transition-ease);
}

.page-fade-slide-exit-active {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.page-fade-slide-enter,
.page-fade-slide-exit-to {
    opacity: 0;
    transform: translateY(0.45rem) scale(0.996);
    filter: blur(3px);
}

h1 {
    @include text-largest;
}

h2 {
    @include text-large;
}

h3 {
    @include text-medium;
}

h4 {
    @include text-small;
}

h5 {
    @include text-smaller;
}

p,
span,
button,
input,
textarea,
sub,
a {
    @include text-smallest;
}

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

    &:hover {
        text-decoration: underline;
    }
}

h1,
h2,
h3,
h4,
h5,
p,
span,
a,
button,
input,
textarea {
    transition: color var(--transition-speed) var(--transition-ease);
}
