/**
 * GoBy Enterprise Design System
 * Dark mode colors matching Django Unfold admin
 * Updated: 2025-01-01
 */

/* ===========================
   CSS CUSTOM PROPERTIES
   =========================== */

:root {
  /* ===== BRAND COLORS (Amber) ===== */
  --primary-50: #FFFBEB;
  --primary-100: #FEF3C7;
  --primary-200: #FDE68A;
  --primary-300: #FCD34D;
  --primary-400: #FBBF24;
  --primary-500: #F59E0B;
  --primary-600: #D97706;
  --primary-700: #B45309;
  --primary-800: #92400E;
  --primary-900: #78350F;
  
  /* ===== BASE COLORS (Zinc - Matching Unfold Admin) ===== */
  --base-50: #FAFAFA;
  --base-100: #F4F4F5;
  --base-200: #E4E4E7;
  --base-300: #D4D4D8;
  --base-400: #A1A1AA;
  --base-500: #71717A;
  --base-600: #52525B;
  --base-700: #3F3F46;
  --base-800: #27272A;
  --base-900: #18181B;
  --base-950: #09090B;
  
  /* ===== SEMANTIC COLORS ===== */
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  
  /* ===== LIGHT MODE ===== */
  --bg-primary: var(--base-50);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: var(--base-100);
  --bg-surface: #FFFFFF;
  --bg-accent: var(--primary-50);
  
  --text-primary: var(--base-900);
  --text-secondary: var(--base-600);
  --text-muted: var(--base-400);
  
  --border-light: var(--base-200);
  --border-default: var(--base-300);
}

/* Dark mode using Unfold admin colors */
.dark {
  --bg-primary: var(--base-950);
  --bg-secondary: var(--base-900);
  --bg-tertiary: var(--base-800);
  --bg-surface: var(--base-800);
  --bg-accent: rgba(245, 158, 11, 0.1);
  
  --text-primary: var(--base-50);
  --text-secondary: var(--base-300);
  --text-muted: var(--base-500);
  --text-inverse: var(--base-900);
  
  --border-light: var(--base-800);
  --border-default: var(--base-700);
}

/* ===========================
   SEMANTIC TEXT UTILITIES
   =========================== */

/* Text colors using CSS variables - auto light/dark */
.text-heading {
  color: var(--text-primary);
}

.text-body {
  color: var(--text-secondary);
}

.text-caption {
  color: var(--text-muted);
}

.text-inverse {
  color: var(--text-inverse, #FFFFFF);
}

/* Label styling for forms */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* Helper text styling */
.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

/* Heading styles using CSS variables */
.heading-xl {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.heading-lg {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.heading-md {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.heading-sm {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Option text inside form-option and form-card */
.form-option .option-title,
.form-card .option-title {
  font-weight: 500;
  color: var(--text-primary);
}

.form-option .option-subtitle,
.form-card .option-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Add text-inverse to :root */
:root {
  --text-inverse: #FFFFFF;
}

/* ===========================
   HERO GRADIENTS - Enterprise
   =========================== */

.hero-gradient {
  background: 
    /* Top glow */
    radial-gradient(ellipse 120% 60% at 50% -20%, 
      rgba(245, 158, 11, 0.12) 0%, 
      transparent 60%),
    /* Right accent */
    radial-gradient(ellipse 60% 50% at 100% 30%, 
      rgba(251, 191, 36, 0.08) 0%, 
      transparent 50%),
    /* Left subtle */
    radial-gradient(ellipse 50% 40% at 0% 60%, 
      rgba(217, 119, 6, 0.05) 0%, 
      transparent 50%),
    /* Base gradient */
    linear-gradient(180deg, 
      #FFFFFF 0%, 
      #FFFBEB 40%, 
      #FEF3C7 80%,
      #FFFBEB 100%);
  position: relative;
  overflow: hidden;
}

/* Animated subtle movement */
.hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle 800px at 80% 30%, 
      rgba(245, 158, 11, 0.06) 0%, 
      transparent 50%);
  animation: hero-float 20s ease-in-out infinite;
  pointer-events: none;
}

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

/* Dark mode - Matching Unfold admin base-950/900 */
.dark .hero-gradient {
  background: 
    /* Top amber glow - more prominent in dark */
    radial-gradient(ellipse 120% 60% at 50% -20%, 
      rgba(245, 158, 11, 0.18) 0%, 
      transparent 60%),
    /* Right accent */
    radial-gradient(ellipse 60% 50% at 100% 30%, 
      rgba(217, 119, 6, 0.12) 0%, 
      transparent 50%),
    /* Left subtle */
    radial-gradient(ellipse 50% 40% at 0% 60%, 
      rgba(180, 83, 9, 0.08) 0%, 
      transparent 50%),
    /* Base gradient - Unfold admin colors */
    linear-gradient(180deg, 
      #09090B 0%,      /* base-950 */
      #18181B 30%,     /* base-900 */
      #27272A 60%,     /* base-800 */
      #18181B 100%);   /* base-900 */
}

.dark .hero-gradient::before {
  background: 
    radial-gradient(circle 800px at 80% 30%, 
      rgba(245, 158, 11, 0.1) 0%, 
      transparent 50%);
}

/* ===========================
   SECTION GRADIENTS
   =========================== */

.gradient-section {
  background: linear-gradient(180deg, 
    #FFFFFF 0%, 
    var(--base-50) 100%);
}

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

.gradient-section-alt {
  background: linear-gradient(180deg, 
    var(--base-50) 0%, 
    #FFFFFF 50%, 
    var(--primary-50) 100%);
}

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

.gradient-section-warm {
  background: linear-gradient(180deg, 
    var(--primary-50) 0%, 
    #FFFFFF 50%, 
    var(--primary-50) 100%);
}

.dark .gradient-section-warm {
  background: linear-gradient(180deg, 
    rgba(245, 158, 11, 0.05) 0%, 
    var(--base-900) 50%, 
    rgba(245, 158, 11, 0.05) 100%);
}

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

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass {
  background: rgba(39, 39, 42, 0.7);
  border: 1px solid rgba(63, 63, 70, 0.5);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.1);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.02),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 20px 40px rgba(245, 158, 11, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.dark .glass-card {
  background: rgba(39, 39, 42, 0.7);
  border: 1px solid rgba(63, 63, 70, 0.5);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dark .glass-card:hover {
  background: rgba(39, 39, 42, 0.85);
  box-shadow: 
    0 20px 40px rgba(245, 158, 11, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

/* ===========================
   CARD VARIANTS
   =========================== */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--primary-300);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08);
}

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

.card-featured {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  border: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.card-featured::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  border-radius: inherit;
  z-index: -1;
  filter: blur(15px);
  opacity: 0.5;
}

/* ===========================
   BUTTON STYLES
   =========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

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

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

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 2px solid var(--border-default);
}

.btn-secondary:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
}

.btn-outline {
  background: transparent;
  color: var(--primary-500);
  border: 2px solid var(--primary-500);
}

.btn-outline:hover {
  background: var(--primary-500);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ===========================
   FORM INPUTS
   =========================== */

.input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg-surface);
  border: 2px solid var(--border-light);
  border-radius: 0.75rem;
  color: var(--text-primary);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.input::placeholder {
  color: var(--text-muted);
}

.input-error {
  border-color: var(--error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input-success {
  border-color: var(--success);
}

/* Form component containers - using CSS variables for consistent theming */
.form-container {
  background: var(--bg-surface);
  border-radius: 1rem;
}

.form-option {
  background: var(--bg-surface);
  border: 2px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.form-option:hover {
  border-color: var(--primary-300);
}

.form-option.selected,
.form-option:has(input:checked) {
  border-color: var(--primary-500);
  background: var(--bg-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.form-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

.form-card:hover {
  border-color: var(--primary-300);
}

.form-divider {
  background: var(--bg-surface);
  color: var(--text-muted);
}

/* Social auth button using CSS vars */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-social:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-default);
}

.btn-social:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===========================
   LOADING STATES
   =========================== */

.loading-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

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

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

@keyframes fade-in-up {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fade-in-down {
  from { 
    opacity: 0; 
    transform: translateY(-20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes scale-in {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

.animate-fade-in { animation: fade-in 0.3s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.4s ease-out; }
.animate-fade-in-down { animation: fade-in-down 0.4s ease-out; }
.animate-scale-in { animation: scale-in 0.3s ease-out; }

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  animation: fade-in-up 0.5s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* ===========================
   GLOW EFFECTS
   =========================== */

.glow-primary {
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
}

.dark .glow-primary {
  box-shadow: 0 0 40px rgba(245, 158, 11, 0.3);
}

.glow-primary-lg {
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.3);
}

.dark .glow-primary-lg {
  box-shadow: 0 0 80px rgba(245, 158, 11, 0.4);
}

/* Text glow */
.text-glow {
  text-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
}

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

* {
  transition-property: color, background-color, border-color, fill, stroke;
  transition-timing-function: ease;
  transition-duration: 0.15s;
}

/* Smooth theme switching */
body,
.hero-gradient,
.gradient-section,
.gradient-section-alt,
.glass,
.glass-card,
.card {
  transition: background 0.4s ease, box-shadow 0.3s ease;
}