/* Custom CSS for maintenance page and general styling */
/* @import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities'; */

/* CSS Custom Properties for Dark/Light Mode */
:root {
  --primary-color: #38e07b;
  --bg-dark: #111827;
  --bg-light: #f9fafb;
  --text-dark-primary: #ffffff;
  --text-dark-secondary: #9ca3af;
  --text-light-primary: #111827;
  --text-light-secondary: #6b7280;
  --surface-dark: #1f2937;
  --surface-light: #ffffff;
  --border-dark: #374151;
  --border-light: #e5e7eb;
}

.dark {
  --bg-primary: var(--bg-dark);
  --text-primary: var(--text-dark-primary);
  --text-secondary: var(--text-dark-secondary);
  --surface-primary: var(--surface-dark);
  --border-primary: var(--border-dark);
}

.light {
  --bg-primary: var(--bg-light);
  --text-primary: var(--text-light-primary);
  --text-secondary: var(--text-light-secondary);
  --surface-primary: var(--surface-light);
  --border-primary: var(--border-light);
}

body {
  font-family: 'Spline Sans', 'Noto Sans', sans-serif;
}

/* Custom animations */
@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  }

  50% {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Custom utility classes */
.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

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

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Maintenance page specific styles */
.maintenance-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}