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

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

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #0A0A0A;
    color: #FAFAFA;
}

.font-display {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

.font-mono-data {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: 'tnum' 1;
}

@layer base {
    :root {
        --background: 0 0% 98%;
        --foreground: 0 0% 4%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 4%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 4%;
        --primary: 0 0% 4%;
        --primary-foreground: 0 0% 98%;
        --secondary: 240 5% 96%;
        --secondary-foreground: 0 0% 9%;
        --muted: 240 5% 96%;
        --muted-foreground: 240 4% 46%;
        --accent: 240 5% 96%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 72% 51%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 6% 90%;
        --input: 240 6% 90%;
        --ring: 0 0% 4%;
        --radius: 0.5rem;
    }
}

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

/* Subtle scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

/* Stagger animation for messages */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
    animation: fadeUp 0.35s ease-out both;
}

/* Pulse ring */
@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}
.live-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #16a34a;
    animation: pulseRing 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Price flash animations */
@keyframes flashUp {
    0% { background-color: rgba(34, 197, 94, 0.22); }
    100% { background-color: transparent; }
}
@keyframes flashDown {
    0% { background-color: rgba(239, 68, 68, 0.22); }
    100% { background-color: transparent; }
}
.flash-up { animation: flashUp 1.2s ease-out; }
.flash-down { animation: flashDown 1.2s ease-out; }

/* Live dot animation */
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.live-pulse {
    animation: livePulse 1.8s ease-in-out infinite;
}

/* Subtle grid noise texture for cards */
.grain-bg {
    position: relative;
}
.grain-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.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}