@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
    margin: 0;
    background: #0A0A0A;
    color: #fff;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

@layer base {
    :root {
        --background: 0 0% 4%;
        --foreground: 0 0% 98%;
        --card: 240 5% 8%;
        --card-foreground: 0 0% 98%;
        --popover: 240 5% 8%;
        --popover-foreground: 0 0% 98%;
        --primary: 358 85% 52%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 5% 12%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 5% 12%;
        --muted-foreground: 240 5% 65%;
        --accent: 240 5% 14%;
        --accent-foreground: 0 0% 98%;
        --destructive: 358 85% 52%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 15%;
        --input: 0 0% 15%;
        --ring: 358 85% 52%;
        --radius: 0.125rem;
    }
}

@layer base {
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
}

@layer utilities {
    .glass {
        @apply bg-white/[0.03] border border-white/10 backdrop-blur-md;
    }
    .fs-glow {
        box-shadow: 0 0 20px -5px rgba(237, 28, 36, 0.2);
    }
    .fs-glow-intense {
        box-shadow: 0 0 40px -10px rgba(237, 28, 36, 0.4);
    }
    .fs-label {
        @apply font-mono text-[10px] uppercase tracking-widest text-zinc-500;
    }
    .fs-chip {
        @apply font-mono text-[10px] px-2 py-0.5 border rounded-sm;
    }
    .fs-chip-pass {
        @apply border-[#10B981]/30 text-[#10B981] bg-[#10B981]/5;
    }
    .fs-chip-fail {
        @apply border-[#ED1C24]/30 text-[#ED1C24] bg-[#ED1C24]/5;
    }
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #ED1C24;
    }
}