@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

:root {
  --background: 8 8 12;
  --foreground: 250, 250, 250;
  --card: 12 10 20;
  --secondary: 15 13 25;
  --card-foreground: 250, 250, 250;
  --popover: 15, 13, 25;
  --popover-foreground: 250, 250, 250;
  --primary: 139 92 246;
  --primary-foreground: 255, 255, 255;
  --secondary-foreground: 250 250 250;
  --muted: 22 20 35;
  --muted-foreground: 165, 160, 190;
  --accent: 30 27 48;
  --accent-foreground: 250, 250, 250;
  --destructive: 255 72 72;
  --destructive-foreground: 250 250 250;
  --border: 255 255 255 / 0.06;
  --input: 20, 18, 32;
  --radius: 0.4rem;
  --ring: var(--primary);
  --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #6366F1 50%, #3B82F6 100%);
  --gradient-primary-hover: linear-gradient(135deg, #6D28D9 0%, #4F46E5 50%, #2563EB 100%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 4px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(var(--primary));
  border-radius: 0.375rem;
}

::selection {
  background-color: rgb(var(--primary) / 0.3);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}

.backdrop-blur-sm {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@keyframes bounce-forever {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  50% { opacity: .5; }
}

@keyframes slide-in-from-bottom-40 {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-right {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up {
  from { transform: translate3d(0, 30%, 0); opacity: 0; visibility: hidden; }
  to { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.05); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.02); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-bounce-forever { animation: bounce-forever 1.4s infinite ease-in-out; }
.animate-fade-in { animation: fade-in 0.05s ease-out; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-slide-in-from-bottom-40 { animation: slide-in-from-bottom-40 0.05s ease-out; }
.animate-slide-in-right { animation: slide-in-right 0.4s ease-out; }
.animate-slide-in-up { animation: slide-in-up 0.5s ease-in-out forwards; }
.animate-drift { animation: drift 20s ease-in-out infinite; }
.animate-drift-slow { animation: drift 25s ease-in-out infinite; }
.animate-shake { animation: shake 0.4s ease-in-out; }

.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-primary-hover:hover {
  background: var(--gradient-primary-hover);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: rgb(var(--card));
  border-radius: 0.75rem;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-primary);
  z-index: -1;
  opacity: 0.2;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.15);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgb(var(--primary) / 0.2);
}

.prose-dark {
  color: rgb(var(--foreground));
}
.prose-dark h1, .prose-dark h2, .prose-dark h3, .prose-dark h4 {
  color: rgb(var(--foreground));
  font-weight: 700;
}
.prose-dark p {
  color: rgb(var(--muted-foreground));
  margin-top: 1em;
  margin-bottom: 1em;
}
.prose-dark a {
  color: rgb(var(--primary));
  text-decoration: underline;
}
.prose-dark ul, .prose-dark ol {
  padding-left: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.prose-dark li {
  color: rgb(var(--muted-foreground));
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}
.prose-dark strong {
  color: rgb(var(--foreground));
  font-weight: 600;
}
.prose-dark code {
  background: rgb(var(--muted));
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose-dark img, .prose-dark video {
  border-radius: 0.5rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.prose-dark iframe {
  border-radius: 0.5rem;
  width: 100%;
  aspect-ratio: 16/9;
}
.prose-dark blockquote {
  border-left: 3px solid rgb(var(--primary));
  padding-left: 1em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  color: rgb(var(--muted-foreground));
  font-style: italic;
}