@use "./theme.scss" as theme;
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --link: #58a6ff;
    --danger: #f00;
    --monospace: "JetBrains Mono", "Menlo", "Monaco", monospace;
    --font-ui: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    @include theme.theme(#951fd9, #ffffff);
}

.dark {
    @include theme.theme(#951fd9, #292f33);

    // Dark native controls such as scrollbars
    color-scheme: dark;
}

html {
    font-size: 16px;
    font-family: var(--font-ui);
    line-height: 1.5;
    text-rendering: optimizequality;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
}

* {
    margin: 0;
    padding: 0;
    color: inherit;
    text-decoration: inherit;
}

body {
    background: var(--g300);
    color: var(--a800);

    line-height: 1.25;
    position: relative;
}

html,
body {
    height: 100%;
}

// not used in app/ dir
#__next {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    position: relative; // squashes react-laag warning
}

#layers {
    z-index: 999;
}

#__next > main {
    flex: 1;
    width: 100%;
}

.routerProgressBar {
    z-index: 999;
}

body.no-scroll {
    overflow: hidden;

    #__next {
        height: stretch;
        height: 100svh;
    }
}
