@import "tailwindcss";
@import "@catppuccin/tailwindcss/macchiato.css";

@theme {
    --font-family-sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("./assets/fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "NerdFontSymbols";
    src: url("./assets/fonts/nerd-fonts-symbols.woff2") format("woff2");
    font-display: block;
}

.ui-btn {
    @apply text-ctp-text text-sm border border-ctp-text rounded px-3 py-1 min-w-8 lg:min-w-26 text-center cursor-pointer transition-colors;
}

.theme-ui-btn {
    @apply text-ctp-text text-3xl border border-ctp-text rounded px-3 py-1 min-w-10 text-center cursor-pointer transition-colors;
}

.ui-btn:hover {
    @apply bg-ctp-surface0 text-ctp-green border-ctp-green duration-300 ease-in-out;
}

.ui-btn-active {
    @apply bg-ctp-surface0 text-ctp-green border-ctp-green;
}

.stream-frame {
    width: 96vw;
    margin: 0 auto;
    @apply aspect-video rounded-2xl overflow-hidden border border-ctp-lavender-800 bg-ctp-mantle shadow-lg;
}

.stream-frame iframe {
    @apply w-full h-full border-0;
}

.shiki,
.shiki .line span {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
}

.macchiato .shiki,
.macchiato .shiki .line span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
}

.macchiato .icon-invert {
    filter: invert(1);
}