/**
 * GoBy Modern Gradients & Dark Mode Enhancements
 * Soft, light gradients with smooth transitions
 */

/* ===========================
   GRADIENT BACKGROUNDS
   =========================== */

/* Light mode gradients - soft, airy, and clean */
.gradient-cream-light {
  background: linear-gradient(
    135deg, 
    #ffffff 0%, 
    #fffcf9 25%, 
    #fff8f2 50%, 
    #fff5eb 75%,
    #fff9f5 100%
  );
  transition: background 0.4s ease;
}

.gradient-cream-radial {
  background: radial-gradient(
    ellipse at top center,
    #ffffff 0%,
    #fffcfa 30%,
    #fff8f3 60%,
    #fff5ed 100%
  );
  transition: background 0.4s ease;
}

.gradient-orange-warm {
  background: linear-gradient(
    135deg, 
    #fff9f5 0%, 
    #fff5ed 30%,
    #ffefe3 60%, 
    #ffe9d9 100%
  );
  transition: background 0.4s ease;
}

.gradient-section-alt {
  background: linear-gradient(
    180deg, 
    #ffffff 0%, 
    #fffdfb 20%,
    #fffaf7 50%, 
    #fff7f1 80%,
    #fff5ed 100%
  );
  transition: background 0.4s ease;
}

/* Hero gradient - very soft and inviting */
.hero-gradient {
  background: linear-gradient(
    160deg,
    #ffffff 0%,
    #fffcf9 20%,
    #fff9f4 40%,
    #fff6ee 60%,
    #fff3e8 80%,
    #fff9f4 100%
  );
  transition: background 0.4s ease;
}

/* Dark mode gradients - sophisticated dark tones */
.dark .gradient-cream-light {
  background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1f2937 100%);
}

.dark .gradient-cream-radial {
  background: radial-gradient(
    ellipse at top,
    #111827 0%,
    #1f2937 40%,
    #374151 100%
  );
}

.dark .gradient-orange-warm {
  background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
}

.dark .gradient-section-alt {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.dark .hero-gradient {
  background: linear-gradient(
    160deg,
    #0f172a 0%,
    #1e293b 30%,
    #334155 60%,
    #1e293b 100%
  );
}

/* ===========================
   CARD BACKGROUNDS
   =========================== */

.card-light {
  background: linear-gradient(145deg, #ffffff 0%, #fffcf9 50%, #fff9f5 100%);
  border: 1px solid rgba(251, 146, 60, 0.08);
  transition: all 0.3s ease;
}

.dark .card-light {
  background: linear-gradient(145deg, #1f2937 0%, #374151 100%);
  border: 1px solid rgba(251, 146, 60, 0.2);
}

.card-cream {
  background: linear-gradient(145deg, #fffcfa 0%, #fff8f3 50%, #fff5ed 100%);
  border: 1px solid rgba(251, 146, 60, 0.1);
  transition: all 0.3s ease;
}

.dark .card-cream {
  background: linear-gradient(145deg, #374151 0%, #4b5563 100%);
  border: 1px solid rgba(251, 146, 60, 0.25);
}

/* ===========================
   TEXT COLORS (WCAG AAA)
   =========================== */

/* Light mode - optimized contrast */
.text-primary-light {
  color: #111827; /* Near black for maximum readability */
}

.text-secondary-light {
  color: #4b5563; /* Dark gray for secondary text */
}

.text-muted-light {
  color: #6b7280; /* Medium gray for hints */
}

/* Dark mode - optimized contrast */
.dark .text-primary-light {
  color: #f9fafb; /* Near white */
}

.dark .text-secondary-light {
  color: #d1d5db; /* Light gray */
}

.dark .text-muted-light {
  color: #9ca3af; /* Medium gray */
}

/* ===========================
   PRICING CARD ENHANCEMENTS
   =========================== */

.pricing-card {
  background: linear-gradient(145deg, #ffffff 0%, #fff9f0 100%);
  border: 2px solid #ffedd5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
  border-color: #f97316;
}

.dark .pricing-card {
  background: linear-gradient(145deg, #1f2937 0%, #374151 100%);
  border-color: #4b5563;
}

.dark .pricing-card:hover {
  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.25);
  border-color: #f97316;
}

/* Premium card (highlighted) */
.pricing-card-premium {
  background: linear-gradient(145deg, #f97316 0%, #ea580c 100%);
  border: 2px solid #fb923c;
  position: relative;
}

.pricing-card-premium::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(145deg, #fb923c, #f97316);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
  filter: blur(12px);
}

/* ===========================
   FEATURE CARDS
   =========================== */

.feature-card {
  background: linear-gradient(145deg, #ffffff 0%, #fff9f0 100%);
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.1);
}

.dark .feature-card {
  background: linear-gradient(145deg, #1f2937 0%, #374151 100%);
}

.dark .feature-card:hover {
  box-shadow: 0 12px 24px rgba(249, 115, 22, 0.2);
}

/* ===========================
   HERO SECTION ENHANCEMENTS
   =========================== */

.hero-gradient {
  background: radial-gradient(
    ellipse at top left,
    #fff9f0 0%,
    #ffedd5 25%,
    #fed7aa 50%,
    #fff7ed 100%
  );
  position: relative;
  overflow: hidden;
}

.hero-gradient::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(249, 115, 22, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.dark .hero-gradient {
  background: radial-gradient(
    ellipse at top left,
    #0f172a 0%,
    #1e293b 25%,
    #334155 50%,
    #1e293b 100%
  );
}

.dark .hero-gradient::before {
  background: radial-gradient(
    circle,
    rgba(249, 115, 22, 0.15) 0%,
    transparent 70%
  );
}

/* ===========================
   BUTTON ENHANCEMENTS
   =========================== */

.btn-primary-gradient {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  transition: all 0.3s ease;
}

.btn-primary-gradient:hover {
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
  transform: translateY(-2px);
}

.btn-outline-gradient {
  background: transparent;
  border: 2px solid #f97316;
  color: #f97316;
  transition: all 0.3s ease;
}

.btn-outline-gradient:hover {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.dark .btn-outline-gradient {
  border-color: #fb923c;
  color: #fb923c;
}

/* ===========================
   SECTION DIVIDERS
   =========================== */

.section-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ffedd5 50%,
    transparent 100%
  );
}

.dark .section-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #374151 50%,
    transparent 100%
  );
}

/* ===========================
   GLASS MORPHISM (ENHANCED)
   =========================== */

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.08);
}

.dark .glass-card {
  background: rgba(31, 41, 55, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(75, 85, 99, 0.4);
}

.dark .glass-card:hover {
  background: rgba(31, 41, 55, 0.92);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ===========================
   ANIMATIONS
   =========================== */

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ===========================
   UTILITIES
   =========================== */

.shadow-goby {
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.12);
  transition: box-shadow 0.3s ease;
}

.shadow-goby:hover {
  box-shadow: 0 15px 40px rgba(249, 115, 22, 0.18);
}

.dark .shadow-goby {
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.25);
}

.shadow-goby-lg {
  box-shadow: 0 20px 50px rgba(249, 115, 22, 0.15);
  transition: box-shadow 0.3s ease;
}

.dark .shadow-goby-lg {
  box-shadow: 0 20px 50px rgba(249, 115, 22, 0.35);
}

/* ===========================
   LIGHT BACKGROUND UTILITIES
   =========================== */

/* Ultra-light section backgrounds */
.bg-ultra-light {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffefb 50%,
    #fffcf8 100%
  );
  transition: background 0.4s ease;
}

.dark .bg-ultra-light {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
}

/* Subtle cream tint */
.bg-cream-subtle {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffdf9 30%,
    #fffbf5 70%,
    #fff9f2 100%
  );
  transition: background 0.4s ease;
}

.dark .bg-cream-subtle {
  background: linear-gradient(180deg, #1f2937 0%, #374151 100%);
}

/* Pure white with very subtle warmth */
.bg-warm-white {
  background: #fffdfb;
  transition: background 0.4s ease;
}

.dark .bg-warm-white {
  background: #1f2937;
}

/* ===========================
   PAGE TRANSITIONS
   =========================== */

/* Smooth color transitions for theme switching */
body,
section,
header,
footer,
.card-light,
.card-cream,
.glass-card {
  transition: background-color 0.4s ease, background 0.4s ease, border-color 0.3s ease;
}

/* Text transition for theme switching */
h1, h2, h3, h4, h5, h6, p, span, a, li {
  transition: color 0.3s ease;
}