@tailwind base;
@tailwind components;
@tailwind utilities;

/* Critical CSS for above-the-fold content */
@layer base {
  :root {
    /* Professional Finance & Banking Color Palette */
    --background: 0 0% 98%; /* Very light gray */
    --foreground: 214 41% 19%; /* Deep navy #1B2A41 */
    --card: 0 0% 100%; /* white */
    --card-foreground: 214 41% 19%; /* Deep navy */
    --popover: 0 0% 100%; /* white */
    --popover-foreground: 214 41% 19%; /* Deep navy */
    
    /* Dark navy primary color scheme */
    --primary: 215 28% 17%; /* Dark navy #1E293B */
    --primary-foreground: 0 0% 100%;
    --primary-hover: 215 28% 15%;

    /* Secondary and accent colors */
    --secondary: 215 28% 17%; /* Matching navy */
    --secondary-foreground: 0 0% 100%;
    --accent: 215 28% 17%; /* Consistent navy accent */
    --accent-foreground: 0 0% 100%;
    
    /* Muted Accents */
    --lavender: 210 13% 35%; /* Muted steel #4C5C68 */
    --lavender-foreground: 0 0% 100%; /* white */
    --warm-yellow: 43 96% 56%; /* Warmer, muted yellow */
    --midnight-navy: 215 28% 17%;
    
    /* Neutral tones */
    --muted: 210 40% 98%; /* Very light gray */
    --muted-foreground: 215 16% 47%; /* Gray-500 */
    
    --destructive: 0 84% 60%; /* Muted red */
    --destructive-foreground: 0 0% 100%; /* white */
    --border: 214 32% 91%; /* Light gray border */
    --input: 210 40% 96%; /* Light input background */
    --ring: 214 41% 19%; /* Navy focus ring */
    --radius: 1rem;
    
    /* Sidebar colors */
    --sidebar-background: 0 0% 100%; /* white */
    --sidebar-foreground: 214 41% 19%; /* Deep navy */
    --sidebar-primary: 214 41% 19%; /* Deep navy */
    --sidebar-primary-foreground: 0 0% 100%; /* white */
    --sidebar-accent: 210 40% 98%; /* Light gray */
    --sidebar-accent-foreground: 214 41% 19%; /* Deep navy */
    --sidebar-border: 214 32% 91%; /* Light border */
    --sidebar-ring: 214 41% 19%; /* Deep navy */
    
    /* Clean background gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-hover)));
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
    
    /* Zimbabwe-inspired accent colors (professional versions) */
    --zim-gold: 43 96% 56%; /* Muted gold */
    --zim-red: 0 70% 42%; /* Muted red */
    --zim-green: 142 76% 36%; /* Muted green */
    --zim-earth: 25 10% 45%; /* Muted brown */
    
    /* Professional Shadows */
    --shadow-card: 0 1px 3px 0 hsl(214 41% 19% / 0.08), 0 1px 2px -1px hsl(214 41% 19% / 0.08);
    --shadow-elegant: 0 8px 25px -3px hsl(214 41% 19% / 0.12), 0 4px 6px -4px hsl(214 41% 19% / 0.12);
    --shadow-glow: 0 0 25px hsl(225 96% 62% / 0.25);
    --shadow-premium: 0 20px 25px -5px hsl(214 41% 19% / 0.08), 0 8px 10px -6px hsl(214 41% 19% / 0.08);
    
    /* Smooth Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, sans-serif;
    font-display: swap;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Zimbabwe flag colors as utility classes */
  .text-zim-gold { color: hsl(var(--zim-gold)); }
  .text-zim-red { color: hsl(var(--zim-red)); }
  .text-zim-green { color: hsl(var(--zim-green)); }
  .bg-zim-gold { background-color: hsl(var(--zim-gold)); }
  .bg-zim-red { background-color: hsl(var(--zim-red)); }
  .bg-zim-green { background-color: hsl(var(--zim-green)); }
  .border-zim-gold { border-color: hsl(var(--zim-gold)); }
  .border-zim-red { border-color: hsl(var(--zim-red)); }
  .border-zim-green { border-color: hsl(var(--zim-green)); }
}

/* Enhanced scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Mobile-first touch interactions */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .hover\\:scale-105:hover {
    transform: none;
  }
  
  /* Ensure buttons have proper touch targets */
  button, a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Optimized animations - reduced motion for performance */
@keyframes zimbabwe-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

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

/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Improve rendering performance */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Critical loading states */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Mobile-specific optimizations */
@media (max-width: 767px) {
  /* Larger touch targets on mobile */
  .touch-manipulation {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
  
  /* Prevent zoom on input focus */
  input, select, textarea {
    font-size: 16px;
  }
  
  /* Better spacing for mobile */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Optimized spacing for tablets */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Desktop optimizations */
@media (min-width: 1024px) {
  /* Better typography hierarchy on larger screens */
  body {
    font-size: 18px;
  }
}