@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700;900&family=DM+Sans:opsz,wght@9..40,400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

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

body {
    margin: 0;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Chivo', sans-serif;
}

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

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 4%;
        --card: 240 5% 96%;
        --card-foreground: 0 0% 4%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 4%;
        --primary: 221 83% 53%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 5% 96%;
        --secondary-foreground: 240 6% 10%;
        --muted: 240 5% 96%;
        --muted-foreground: 240 4% 46%;
        --accent: 240 5% 96%;
        --accent-foreground: 240 6% 10%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 6% 90%;
        --input: 240 6% 90%;
        --ring: 221 83% 53%;
        --chart-1: 221 83% 53%;
        --chart-2: 160 84% 39%;
        --chart-3: 38 92% 50%;
        --chart-4: 0 84% 60%;
        --chart-5: 262 83% 58%;
        --radius: 0.5rem;
    }

    .dark {
        --background: 0 0% 2%;
        --foreground: 0 0% 98%;
        --card: 0 0% 4%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 4%;
        --popover-foreground: 0 0% 98%;
        --primary: 217 91% 60%;
        --primary-foreground: 0 0% 100%;
        --secondary: 240 4% 16%;
        --secondary-foreground: 0 0% 98%;
        --muted: 240 4% 16%;
        --muted-foreground: 240 5% 65%;
        --accent: 240 4% 16%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 63% 31%;
        --destructive-foreground: 0 0% 98%;
        --border: 240 4% 16%;
        --input: 240 4% 16%;
        --ring: 217 91% 60%;
        --chart-1: 217 91% 60%;
        --chart-2: 160 60% 45%;
        --chart-3: 45 93% 58%;
        --chart-4: 0 90% 65%;
        --chart-5: 270 70% 70%;
    }
}

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

/* Glassmorphism effect */
.glass {
    @apply bg-white/70 dark:bg-black/60 backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-sm;
}

/* Hover lift animation */
.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-muted;
}

::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
}

/* Active button scale */
.active-scale {
    @apply active:scale-95;
}

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