@import "tailwindcss";

@config '../tailwind.config.ts';

@keyframes accordion-down {
    from {
        height: 0;
    }
    to {
        height: var(--bits-accordion-content-height);
    }
}

@keyframes accordion-up {
    from {
        height: var(--bits-accordion-content-height);
    }
    to {
        height: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@theme {
    --breakpoint-xxs: 23rem;
    --breakpoint-xs: 32rem;
    --breakpoint-2xl: 90rem;

    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 240 10% 3.9%;

        --card: 0 0% 100%;
        --card-foreground: 240 10% 3.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 3.9%;

        --primary: 240 5.9% 10%;
        --primary-foreground: 0 0% 98%;

        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 5.9% 10%;

        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 3.8% 46.1%;

        --accent: 240 4.8% 95.9%;
        --accent-foreground: 240 5.9% 10%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;

        --ring: 240 5.9% 10%;

        --radius: 0.5rem;

        --epic: 199 100% 57%;
        --epic-foreground: 240 11% 7%;

        --epic-secondary: 240 4% 20%;
        --epic-secondary-foreground: 240 2% 32%;

        --epic-muted: 0 0% 48%;
        --epic-muted-foreground: 0 0% 8%;

        --epic-accent: 0 0% 96%;
        --epic-accent-foreground: 0 0% 8%;

        --surface-alt: 0 0% 95%;
    }

    .dark {
        --background: 240 11% 7%;
        --foreground: 0 0% 98%;

        --card: 240 10% 3.9%;
        --card-foreground: 0 0% 98%;

        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;

        --primary: 0 0% 98%;
        --primary-foreground: 240 5.9% 10%;

        --secondary: 240 11% 7%;
        --secondary-foreground: 0 0% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --accent: 240 3.7% 15.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 357 96% 30%;
        --destructive-foreground: 0 0% 98%;

        --border: 240 3.7% 15.9%;
        --input: 240 3.7% 15.9%;

        --epic-muted: 240 1% 69%;
        --epic-muted-foreground: 0 0% 100%;

        --epic-accent: 240 6% 13%;
        --epic-accent-foreground: 0 0% 100%;

        --surface-alt: 240 5% 10%;
    }

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: hsl(var(--border));
        scroll-behavior: smooth;
        touch-action: manipulation;
    }

    *::-webkit-scrollbar {
        width: 0.25rem;
    }

    *::-webkit-scrollbar-thumb {
        background-color: hsl(0 0% 15%);
    }

    *::-webkit-scrollbar-track {
        background-color: transparent;
    }

    main {
        scrollbar-gutter: stable;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    body {
        background-color: hsl(var(--background));
        color: hsl(var(--foreground));
        overflow-x: hidden !important;
        min-height: 100dvh;
    }

    button {
        cursor: pointer;
    }

    input::placeholder,
    textarea::placeholder {
        color: hsl(var(--muted-foreground));
    }

    a:hover {
        cursor: pointer;
    }
}

@layer components {
    .skeleton-loader {
        background: hsl(var(--muted) / 0.7);
        animation: pulse 1.5s ease-in-out infinite;
    }
}