@import "tailwindcss";

:root {
  --background: #fafafa;
  --foreground: #0f0f0f;
  --border: #e5e5e5;
  --border-hover: #d4d4d4;
  --muted: #737373;
  --accent: #6366f1;
  --accent-dark: #4f46e5;
  --gradient-start: #0891b2;
  --gradient-end: #0284c7;
}

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

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

/* World-Class Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Premium Button - Vibrant & Engaging */
.btn-premium {
  background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25);
  position: relative;
  overflow: hidden;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-premium:hover::before {
  opacity: 1;
}

.btn-premium:hover {
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
  transform: translateY(-2px);
}

.btn-premium:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

.btn-premium > * {
  position: relative;
  z-index: 1;
}

/* Premium Input - Clean & Minimal */
.input-premium {
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: white;
  line-height: 1.5;
}

.input-premium:hover {
  border-color: #c4c4c4;
}

.input-premium:focus {
  outline: none;
  border-color: #0891b2;
  box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1);
  background: #fafafa;
}

/* Premium Card - Subtle & Elegant */
.card-premium {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-premium:hover {
  border-color: #0891b2;
  box-shadow: 0 8px 24px rgba(8, 145, 178, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
}

/* Gradient Background */
.gradient-bg {
  background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
}

/* Glass Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Avatar Loading */
img[alt*="avatar"],
img[alt*="profile"],
img[alt*="Preview"] {
  background: linear-gradient(135deg, #0891b2 0%, #0284c7 100%);
}

/* Ensure images load properly */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}