/**
 * GoBy Modern Gradients & Dark Mode Enhancements
 * Aligned with Unfold Admin Color Schema (Amber Primary + Zinc Base)
 * 
 * Color Reference (from settings.py UNFOLD.COLORS):
 * Primary (Amber): 50:#FFFBEB → 500:#F59E0B → 950:#451A03
 * Base (Zinc): 50:#FAFAFA → 500:#71717A → 950:#09090B
 */

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */
:root {
  /* Primary Brand - Amber (matching Unfold) */
  --goby-primary-50: #FFFBEB;
  --goby-primary-100: #FEF3C7;
  --goby-primary-200: #FDE68A;
  --goby-primary-300: #FCD34D;
  --goby-primary-400: #FBBF24;
  --goby-primary-500: #F59E0B;
  --goby-primary-600: #D97706;
  --goby-primary-700: #B45309;
  --goby-primary-800: #92400E;
  --goby-primary-900: #78350F;
  --goby-primary-950: #451A03;
  
  /* Base - Zinc (matching Unfold) */
  --goby-base-50: #FAFAFA;
  --goby-base-100: #F4F4F5;
  --goby-base-200: #E4E4E7;
  --goby-base-300: #D4D4D8;
  --goby-base-400: #A1A1AA;
  --goby-base-500: #71717A;
  --goby-base-600: #52525B;
  --goby-base-700: #3F3F46;
  --goby-base-800: #27272A;
  --goby-base-900: #18181B;
  --goby-base-950: #09090B;
  
  /* Light mode defaults */
  --goby-bg-primary: var(--goby-base-50);
  --goby-bg-secondary: var(--goby-base-100);
  --goby-border-color: var(--goby-base-200);
  --goby-text-primary: var(--goby-base-900);
  --goby-text-secondary: var(--goby-base-600);
  --goby-text-muted: var(--goby-base-500);
}

.dark {
  --goby-bg-primary: var(--goby-base-900);
  --goby-bg-secondary: var(--goby-base-800);
  --goby-border-color: var(--goby-base-700);
  --goby-text-primary: var(--goby-base-100);
  --goby-text-secondary: var(--goby-base-300);
  --goby-text-muted: var(--goby-base-400);
}

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

/* Light mode gradients - clean zinc base with amber warmth */
.gradient-cream-light {
  background: linear-gradient(
    135deg, 
    var(--goby-base-50) 0%, 
    #FEFCF7 25%, 
    var(--goby-primary-50) 50%, 
    #FEFDFB 75%,
    var(--goby-base-50) 100%
  );
  transition: background 0.4s ease;
}

.gradient-cream-radial {
  background: radial-gradient(
    ellipse at top center,
    var(--goby-base-50) 0%,
    #FEFDFB 30%,
    var(--goby-primary-50) 60%,
    var(--goby-base-100) 100%
  );
  transition: background 0.4s ease;
}

.gradient-amber-warm {
  background: linear-gradient(
    135deg, 
    var(--goby-primary-50) 0%, 
    var(--goby-primary-100) 30%,
    #FEF6E5 60%, 
    var(--goby-primary-50) 100%
  );
  transition: background 0.4s ease;
}

.gradient-section-alt {
  background: linear-gradient(
    180deg, 
    var(--goby-base-50) 0%, 
    #FCFCFC 20%,
    var(--goby-base-100) 50%, 
    #FEFCF7 80%,
    var(--goby-primary-50) 100%
  );
  transition: background 0.4s ease;
}

/* Hero gradient - amber accent on zinc base */
.hero-gradient {
  background: linear-gradient(
    160deg,
    var(--goby-base-50) 0%,
    #FEFDFB 20%,
    var(--goby-primary-50) 40%,
    var(--goby-primary-100) 60%,
    var(--goby-primary-50) 80%,
    var(--goby-base-50) 100%
  );
  transition: background 0.4s ease;
}

/* Dark mode gradients - zinc scale */
.dark .gradient-cream-light {
  background: linear-gradient(
    135deg, 
    var(--goby-base-900) 0%, 
    var(--goby-base-800) 50%, 
    var(--goby-base-900) 100%
  );
}

.dark .gradient-cream-radial {
  background: radial-gradient(
    ellipse at top,
    var(--goby-base-950) 0%,
    var(--goby-base-900) 40%,
    var(--goby-base-800) 100%
  );
}

.dark .gradient-amber-warm {
  background: linear-gradient(
    135deg, 
    var(--goby-base-800) 0%, 
    var(--goby-base-700) 50%, 
    var(--goby-base-800) 100%
  );
}

.dark .gradient-section-alt {
  background: linear-gradient(
    180deg, 
    var(--goby-base-950) 0%, 
    var(--goby-base-900) 50%, 
    var(--goby-base-800) 100%
  );
}

.dark .hero-gradient {
  background: linear-gradient(
    160deg,
    var(--goby-base-950) 0%,
    var(--goby-base-900) 30%,
    var(--goby-base-800) 60%,
    var(--goby-base-900) 100%
  );
}

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

.card-light {
  background: linear-gradient(
    145deg, 
    var(--goby-base-50) 0%, 
    #FEFDFB 50%, 
    var(--goby-primary-50) 100%
  );
  border: 1px solid var(--goby-primary-100);
  transition: all 0.3s ease;
}

.dark .card-light {
  background: linear-gradient(
    145deg, 
    var(--goby-base-800) 0%, 
    var(--goby-base-700) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.card-cream {
  background: linear-gradient(
    145deg, 
    #FEFDFB 0%, 
    var(--goby-primary-50) 50%, 
    var(--goby-primary-100) 100%
  );
  border: 1px solid var(--goby-primary-200);
  transition: all 0.3s ease;
}

.dark .card-cream {
  background: linear-gradient(
    145deg, 
    var(--goby-base-700) 0%, 
    var(--goby-base-600) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.25);
}

/* ===========================
   TEXT COLORS (WCAG AA Compliant)
   =========================== */

/* Light mode - using Zinc scale */
.text-primary-light {
  color: var(--goby-base-900);
}

.text-secondary-light {
  color: var(--goby-base-600);
}

.text-muted-light {
  color: var(--goby-base-500);
}

/* Dark mode */
.dark .text-primary-light {
  color: var(--goby-base-100);
}

.dark .text-secondary-light {
  color: var(--goby-base-300);
}

.dark .text-muted-light {
  color: var(--goby-base-400);
}

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

.pricing-card {
  background: linear-gradient(
    145deg, 
    var(--goby-base-50) 0%, 
    var(--goby-primary-50) 100%
  );
  border: 2px solid var(--goby-primary-200);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
  border-color: var(--goby-primary-500);
}

.dark .pricing-card {
  background: linear-gradient(
    145deg, 
    var(--goby-base-800) 0%, 
    var(--goby-base-700) 100%
  );
  border-color: var(--goby-base-600);
}

.dark .pricing-card:hover {
  box-shadow: 0 20px 40px rgba(245, 158, 11, 0.25);
  border-color: var(--goby-primary-500);
}

/* Premium card (highlighted) - using Amber brand */
.pricing-card-premium {
  background: linear-gradient(
    145deg, 
    var(--goby-primary-500) 0%, 
    var(--goby-primary-600) 100%
  );
  border: 2px solid var(--goby-primary-400);
  position: relative;
}

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

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

.feature-card {
  background: linear-gradient(
    145deg, 
    var(--goby-base-50) 0%, 
    var(--goby-primary-50) 100%
  );
  border-radius: 1.5rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.1);
}

.dark .feature-card {
  background: linear-gradient(
    145deg, 
    var(--goby-base-800) 0%, 
    var(--goby-base-700) 100%
  );
}

.dark .feature-card:hover {
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.2);
}

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

.hero-section {
  background: radial-gradient(
    ellipse at top left,
    var(--goby-primary-50) 0%,
    var(--goby-primary-100) 25%,
    var(--goby-primary-200) 50%,
    var(--goby-primary-50) 100%
  );
  position: relative;
  overflow: hidden;
}

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

.dark .hero-section {
  background: radial-gradient(
    ellipse at top left,
    var(--goby-base-950) 0%,
    var(--goby-base-900) 25%,
    var(--goby-base-800) 50%,
    var(--goby-base-900) 100%
  );
}

.dark .hero-section::before {
  background: radial-gradient(
    circle,
    rgba(245, 158, 11, 0.15) 0%,
    transparent 70%
  );
}

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

.btn-primary-gradient {
  background: linear-gradient(
    135deg, 
    var(--goby-primary-500) 0%, 
    var(--goby-primary-600) 100%
  );
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all 0.3s ease;
}

.btn-primary-gradient:hover {
  background: linear-gradient(
    135deg, 
    var(--goby-primary-600) 0%, 
    var(--goby-primary-700) 100%
  );
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.btn-outline-gradient {
  background: transparent;
  border: 2px solid var(--goby-primary-500);
  color: var(--goby-primary-600);
  transition: all 0.3s ease;
}

.btn-outline-gradient:hover {
  background: linear-gradient(
    135deg, 
    var(--goby-primary-500) 0%, 
    var(--goby-primary-600) 100%
  );
  color: white;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.dark .btn-outline-gradient {
  border-color: var(--goby-primary-400);
  color: var(--goby-primary-400);
}

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

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

.dark .section-divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--goby-base-700) 50%,
    transparent 100%
  );
}

/* ===========================
   GLASS MORPHISM
   =========================== */

.glass-card {
  background: rgba(250, 250, 250, 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(245, 158, 11, 0.08);
}

.dark .glass-card {
  background: rgba(39, 39, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(63, 63, 70, 0.4);
}

.dark .glass-card:hover {
  background: rgba(39, 39, 42, 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;
}

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

.shadow-goby {
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.12);
  transition: box-shadow 0.3s ease;
}

.shadow-goby:hover {
  box-shadow: 0 15px 40px rgba(245, 158, 11, 0.18);
}

.dark .shadow-goby {
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.25);
}

.shadow-goby-lg {
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.15);
  transition: box-shadow 0.3s ease;
}

.dark .shadow-goby-lg {
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.35);
}

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

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

.dark .bg-ultra-light {
  background: linear-gradient(
    180deg, 
    var(--goby-base-950) 0%, 
    var(--goby-base-900) 100%
  );
}

/* Subtle amber tint */
.bg-amber-subtle {
  background: linear-gradient(
    180deg,
    var(--goby-base-50) 0%,
    #FEFDFB 30%,
    var(--goby-primary-50) 70%,
    var(--goby-primary-100) 100%
  );
  transition: background 0.4s ease;
}

.dark .bg-amber-subtle {
  background: linear-gradient(
    180deg, 
    var(--goby-base-900) 0%, 
    var(--goby-base-800) 100%
  );
}

/* Pure zinc base */
.bg-zinc-base {
  background: var(--goby-base-50);
  transition: background 0.4s ease;
}

.dark .bg-zinc-base {
  background: var(--goby-base-900);
}

/* ===========================
   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;
}

/* ===========================
   LEGACY CLASS ALIASES
   (backwards compatibility)
   =========================== */

/* Map old orange class names to new amber-based styles */
.gradient-orange-warm {
  background: linear-gradient(
    135deg, 
    var(--goby-primary-50) 0%, 
    var(--goby-primary-100) 30%,
    #FEF6E5 60%, 
    var(--goby-primary-50) 100%
  );
  transition: background 0.4s ease;
}

.dark .gradient-orange-warm {
  background: linear-gradient(
    135deg, 
    var(--goby-base-800) 0%, 
    var(--goby-base-700) 50%, 
    var(--goby-base-800) 100%
  );
}

.bg-cream-subtle {
  background: linear-gradient(
    180deg,
    var(--goby-base-50) 0%,
    #FEFDFB 30%,
    var(--goby-primary-50) 70%,
    var(--goby-primary-100) 100%
  );
  transition: background 0.4s ease;
}

.dark .bg-cream-subtle {
  background: linear-gradient(
    180deg, 
    var(--goby-base-900) 0%, 
    var(--goby-base-800) 100%
  );
}

.bg-warm-white {
  background: var(--goby-base-50);
  transition: background 0.4s ease;
}

.dark .bg-warm-white {
  background: var(--goby-base-900);
}