@import "tailwindcss";
@import "github-markdown-css/github-markdown.css";
@import "animate.css";

:root,
.light {
  --background: #fafafa;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --accent: #f59e0b;
  --accent-foreground: #1c1917;
  --accent-muted: rgba(245, 158, 11, 0.2);
  --gradient-accent: rgba(251, 191, 36, 0.15);
}

.dark {
  --background: #0c0c0f;
  --foreground: #fafafa;
  --card: rgba(255, 255, 255, 0.05);
  --card-foreground: #fafafa;
  --muted: rgba(255, 255, 255, 0.05);
  --muted-foreground: #a1a1aa;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #f59e0b;
  --accent-foreground: #1c1917;
  --accent-muted: rgba(245, 158, 11, 0.2);
  --gradient-accent: rgba(251, 191, 36, 0.15);
}

@keyframes gradient-shift {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.animate-gradient { animation: gradient-shift 8s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hover-shimmer { position: relative; overflow: hidden; }
.hover-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
}
.hover-shimmer:hover::after {
  opacity: 1;
  animation: shimmer 1.5s ease-in-out;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.animate-float-badge { animation: float-badge 3s ease-in-out infinite; }

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}