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

@layer base {
  :root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --border: #e2e8f0;
    --code-bg: #1e293b;
  }

  .dark {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --border: #334155;
    --code-bg: #0f172a;
  }

  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

@layer components {
  .hero-gradient {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  }

  .card {
    @apply bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-6 transition-all duration-300;
  }

  .card:hover {
    @apply shadow-lg transform -translate-y-1;
  }

  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
  }

  .btn-primary {
    @apply bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)];
  }

  .btn-outline {
    @apply border border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)];
  }

  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
  }

  .btn-danger {
    @apply bg-red-500 text-white hover:bg-red-600;
  }

  .tag {
    @apply inline-block px-2 py-1 text-xs rounded-full bg-[var(--bg-tertiary)] text-[var(--text-secondary)];
  }

  .nav-link {
    @apply text-[var(--text-secondary)] hover:text-[var(--accent)] transition-colors duration-200;
  }

  .nav-link.active {
    @apply text-[var(--accent)];
  }
}

/* Markdown styles */
.markdown-content {
  @apply text-[var(--text-secondary)] leading-relaxed;
}

.markdown-content h1, .markdown-content h2, .markdown-content h3 {
  @apply text-[var(--text-primary)] font-semibold mt-8 mb-4;
}

.markdown-content h1 { @apply text-3xl; }
.markdown-content h2 { @apply text-2xl; }
.markdown-content h3 { @apply text-xl; }

.markdown-content p {
  @apply mb-4;
}

.markdown-content a {
  @apply text-[var(--accent)] hover:underline;
}

.markdown-content code {
  @apply bg-[var(--bg-tertiary)] px-1.5 py-0.5 rounded text-sm font-mono;
}

.markdown-content pre {
  @apply bg-[var(--code-bg)] p-4 rounded-lg overflow-x-auto mb-4;
}

.markdown-content pre code {
  @apply bg-transparent p-0 text-[#e2e8f0];
}

.markdown-content blockquote {
  @apply border-l-4 border-[var(--accent)] pl-4 italic text-[var(--text-muted)];
}

.markdown-content table {
  @apply w-full border-collapse mb-4;
}

.markdown-content th, .markdown-content td {
  @apply border border-[var(--border)] px-4 py-2;
}

.markdown-content th {
  @apply bg-[var(--bg-tertiary)] font-semibold;
}

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

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 2s steps(40, end);
}

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

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}