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

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

@layer base {
  :root {
    --background: 0 0% 4%;
    --foreground: 0 0% 100%;
    --card: 0 0% 7%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 100%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 9%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 60%;
    --accent: 0 0% 9%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 14%;
    --input: 0 0% 14%;
    --ring: 217 91% 60%;
    --radius: 4px;
  }
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0B0B0B;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

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

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0B0B0B; }
::-webkit-scrollbar-thumb { background: #2A2A2A; }
::-webkit-scrollbar-thumb:hover { background: #3B82F6; }

::selection {
  background-color: rgba(59, 130, 246, 0.3);
  color: #ffffff;
}

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
  opacity: 0;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

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

@layer base {
  [data-debug-wrapper="true"] { display: contents !important; }
  [data-debug-wrapper="true"] > * {
    margin-left: inherit; margin-right: inherit; margin-top: inherit; margin-bottom: inherit;
    padding-left: inherit; padding-right: inherit; padding-top: inherit; padding-bottom: inherit;
    gap: inherit;
    border-left-width: inherit; border-right-width: inherit; border-top-width: inherit; border-bottom-width: inherit;
    border-left-style: inherit; border-right-style: inherit; border-top-style: inherit; border-bottom-style: inherit;
    border-left-color: inherit; border-right-color: inherit; border-top-color: inherit; border-bottom-color: inherit;
  }
}
