@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?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 {
    margin: 0;
    background: #050505;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #00e599;
    color: #000;
}

@layer base {
    :root {
        --background: 0 0% 2%;
        --foreground: 0 0% 100%;
        --card: 0 0% 6.7%;
        --card-foreground: 0 0% 100%;
        --popover: 0 0% 6.7%;
        --popover-foreground: 0 0% 100%;
        --primary: 158 100% 45%;
        --primary-foreground: 0 0% 0%;
        --secondary: 0 0% 10%;
        --secondary-foreground: 0 0% 100%;
        --muted: 0 0% 13.3%;
        --muted-foreground: 240 5% 65%;
        --accent: 0 0% 10%;
        --accent-foreground: 0 0% 100%;
        --destructive: 0 100% 65%;
        --destructive-foreground: 0 0% 100%;
        --border: 0 0% 13.3%;
        --input: 0 0% 13.3%;
        --ring: 158 100% 45%;
        --radius: 0.5rem;
    }
    .dark {
        --background: 0 0% 2%;
        --foreground: 0 0% 100%;
    }
}

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

.font-display {
    font-family: 'Clash Display', sans-serif;
    letter-spacing: -0.02em;
}
.font-mono-ui {
    font-family: 'JetBrains Mono', monospace;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00e599;
}

/* Glow utility */
.glow-green {
    box-shadow: 0 0 24px rgba(0, 229, 153, 0.18);
}

/* Grid texture overlay */
.bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
}

/* Soft floating glow */
@keyframes float-y {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
.animate-float {
    animation: float-y 6s ease-in-out infinite;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-up {
    animation: fade-up 0.7s ease both;
}

@layer base {
    [data-debug-wrapper='true'] {
        display: contents !important;
    }
}