@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Inter-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/fonts/Inter-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/Inter-Bold.ttf') format('truetype');
}

html,
body {
    @include font-inter;
    color: $blueGrey100;
    caret-color: var(--app-caret-color);
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 14px;

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

button, [type=button], [type=reset], [type=submit], [role=button] {
    cursor: default !important;
    outline: none !important;
    border: none;
}

@mixin inputMetaStyles {
    caret-color: #00f0ff;

    &::selection {
        background: rgba($turquoise, 0.3);
    }
}

