/* ============================================
   LOVEHILLS DESIGN SYSTEM
   Modern, Production-Ready Design Tokens
   ============================================ */

:root {
  /* ========== BRAND COLORS ==========
     Single brand: deep teal (#0b5e57) → emerald (#10b981)
     Used everywhere: sidebar, buttons, stat cards, active nav, badges.
     No blue (#2563eb) used as primary — that was the old conflicting identity.
  ========== */
  --brand-primary:      #0b5e57;
  --brand-primary-dark: #084f49;
  --brand-primary-mid:  #0d7a71;
  --brand-accent:       #10b981;
  --brand-accent-light: #34d399;

  /* ========== SEMANTIC COLORS ========== */
  --color-success:      #10b981;
  --color-success-dark: #059669;
  --color-warning:      #f59e0b;
  --color-warning-dark: #d97706;
  --color-error:        #ef4444;
  --color-error-dark:   #dc2626;
  --color-info:         #3b82f6;
  --color-info-dark:    #2563eb;

  /* ========== NEUTRAL PALETTE ========== */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ========== GRADIENTS ========== */
  --gradient-primary: linear-gradient(135deg, #0b5e57, #10b981);
  --gradient-success: linear-gradient(135deg, #059669, #10b981);
  --gradient-warning: linear-gradient(135deg, #d97706, #f59e0b);
  --gradient-info:    linear-gradient(135deg, #2563eb, #3b82f6);
  --gradient-purple:  linear-gradient(135deg, #7c3aed, #8b5cf6);
  --gradient-dark:    linear-gradient(135deg, #0f172a, #1e293b);

  /* ========== TYPOGRAPHY ========== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ========== SPACING SCALE ========== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ========== SHADOWS ========== */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  --shadow-primary: 0 10px 15px -3px rgba(11,94,87,0.25);
  --shadow-success: 0 10px 15px -3px rgba(16,185,129,0.2);
  --shadow-warning: 0 10px 15px -3px rgba(245,158,11,0.2);
  --shadow-info:    0 10px 15px -3px rgba(59,130,246,0.2);

  /* ========== BORDER RADIUS ========== */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ========== TRANSITIONS ========== */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   200ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   300ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 400ms cubic-bezier(0.68,-0.55,0.265,1.55);

  /* ========== Z-INDEX SCALE ========== */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

/* ========== UTILITY CLASSES ========== */
.animate-fade-in {
  animation: fadeIn var(--transition-base) ease-out;
}

.animate-slide-up {
  animation: slideInUp var(--transition-slow) ease-out;
}

.animate-slide-right {
  animation: slideInRight var(--transition-slow) ease-out;
}

.animate-scale-in {
  animation: scaleIn var(--transition-base) ease-out;
}

/* Stagger animations */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* ========== COMPONENT BASE STYLES ========== */
.card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.stat-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  color: white;
  transition: all var(--transition-slow);
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-card.success {
  background: var(--gradient-success);
  box-shadow: var(--shadow-success);
}

.stat-card.info {
  background: var(--gradient-info);
  box-shadow: var(--shadow-info);
}

.stat-card.warning {
  background: var(--gradient-warning);
  box-shadow: var(--shadow-warning);
}

.stat-card.purple {
  background: var(--gradient-purple);
  box-shadow: 0 10px 15px -3px rgba(124,58,237,0.25);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  box-shadow: 0 12px 20px -3px rgba(11,94,87,0.35);
}

/* ========== LOADING STATES ========== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-100) 50%,
    var(--gray-200) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.spinner {
  border: 3px solid var(--gray-200);
  border-top-color: var(--lovehills-primary);
  border-radius: var(--radius-full);
  width: 24px;
  height: 24px;
  animation: spin 0.8s linear infinite;
}

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