@import "tailwindcss";

@font-face {
    font-family: "Instrument Sans";
    src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2") format("woff2");
    font-display: swap;
}

:root {
    --default-font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
    line-height: normal;
    color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply font-semibold;
}

h1 {
    font-size: clamp(42px, 10vw, 64px);
}

h2 {
    font-size: clamp(30px, 6vw, 36px);
}

h3 {
    font-size: 1.25rem;
}

input:not(.search) {
    @apply px-4 py-2 rounded-md w-full bg-[#1C1C21] border border-[#2E2E32] placeholder:text-[#8A8E90] text-white focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
    
    &[type="file"] {
        @apply p-0 cursor-pointer;

        &::file-selector-button {
            @apply px-2 py-2 mr-1 bg-[hsl(240,6%,18%)] text-white cursor-pointer;
        }
    }
}