@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

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

html, body, #root { height: 100%; }

body {
    margin: 0;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F9FAFB;
    color: #09090B;
}

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

@layer base {
    :root {
        --background: 0 0% 98%;
        --foreground: 240 10% 4%;
        --card: 0 0% 100%;
        --card-foreground: 240 10% 4%;
        --popover: 0 0% 100%;
        --popover-foreground: 240 10% 4%;
        --primary: 240 10% 4%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 4.8% 95.9%;
        --secondary-foreground: 240 10% 4%;
        --muted: 240 4.8% 95.9%;
        --muted-foreground: 240 4% 46%;
        --accent: 217 91% 60%;
        --accent-foreground: 0 0% 100%;
        --destructive: 346 87% 50%;
        --destructive-foreground: 0 0% 100%;
        --border: 240 6% 90%;
        --input: 240 6% 90%;
        --ring: 240 10% 4%;
        --radius: 0px;
    }
}

@layer base {
    * { @apply border-border; }
    body { @apply bg-background text-foreground; }
    h1, h2, h3, h4, h5 { font-family: 'Outfit', system-ui, sans-serif; letter-spacing: -0.02em; }
    .number, .price, .pct { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
}

@layer components {
    .btn-brutal {
        @apply inline-flex items-center justify-center gap-2 rounded-none font-bold tracking-widest uppercase text-[11px] border-2 border-zinc-900 bg-zinc-900 text-white px-5 py-3 transition-all;
        box-shadow: 4px 4px 0 0 rgba(9,9,11,1);
    }
    .btn-brutal:hover {
        @apply bg-white text-zinc-900;
        transform: translate(2px, 2px);
        box-shadow: none;
    }
    .btn-brutal-outline {
        @apply inline-flex items-center justify-center gap-2 rounded-none font-bold tracking-widest uppercase text-[11px] border-2 border-zinc-900 bg-white text-zinc-900 px-5 py-3 transition-all;
        box-shadow: 4px 4px 0 0 rgba(9,9,11,1);
    }
    .btn-brutal-outline:hover {
        @apply bg-zinc-900 text-white;
        transform: translate(2px, 2px);
        box-shadow: none;
    }
    .card-brutal {
        @apply bg-white border-2 border-zinc-900 rounded-none p-6 md:p-8;
    }
    .card-brutal-shadow {
        @apply bg-white border-2 border-zinc-900 rounded-none;
        box-shadow: 6px 6px 0 0 rgba(9,9,11,1);
    }
    .input-brutal {
        @apply w-full rounded-none border-2 border-zinc-300 bg-white focus:border-zinc-900 focus-visible:outline-none focus:ring-0 px-3 py-3 font-body;
    }
    .label-brutal {
        @apply text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500;
    }
    .chip-up {
        @apply inline-flex items-center gap-1 px-2 py-0.5 text-xs font-bold;
        color: #059669;
        background: #D1FAE5;
    }
    .chip-down {
        @apply inline-flex items-center gap-1 px-2 py-0.5 text-xs font-bold;
        color: #E11D48;
        background: #FFE4E6;
    }
    .grid-lines {
        background-image: linear-gradient(to right, rgba(9,9,11,0.06) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(9,9,11,0.06) 1px, transparent 1px);
        background-size: 64px 64px;
    }
    .noise-bg::before {
        content: "";
        position: absolute; inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
        opacity: 0.05; pointer-events: none;
    }
}

::selection { background: #09090B; color: #fff; }