@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* CSS Variables for Light/Dark Theme */
:root {
  /* Light Theme */
  --bg-primary: 248 250 252;
  --bg-secondary: 255 255 255;
  --bg-tertiary: 241 245 249;
  --text-primary: 15 23 42;
  --text-secondary: 71 85 105;
  --text-tertiary: 148 163 184;
  --border-primary: 226 232 240;
  --border-secondary: 241 245 249;
  
  /* Accent Colors */
  --accent-primary: 59 130 246;
  --accent-success: 34 197 94;
  --accent-warning: 245 158 11;
  --accent-error: 239 68 68;
  
  /* Shadows */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.dark {
  /* Dark Theme */
  --bg-primary: 2 6 23;
  --bg-secondary: 15 23 42;
  --bg-tertiary: 30 41 59;
  --text-primary: 248 250 252;
  --text-secondary: 203 213 225;
  --text-tertiary: 148 163 184;
  --border-primary: 51 65 85;
  --border-secondary: 30 41 59;
  
  /* Enhanced shadows for dark theme */
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.3);
  --shadow-modal: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

/* Base Styles */
* {
  @apply border-border;
}

body {
  @apply bg-slate-950 text-white font-sans antialiased;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  min-height: 100vh;
}

/* Component Classes */
@layer components {
  /* Button Components */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium rounded-button transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-sm;
  }
  
  .btn-secondary {
    @apply bg-dark-700 text-white hover:bg-dark-600 focus:ring-dark-500 border border-dark-600;
  }
  
  .btn-success {
    @apply bg-success-600 text-white hover:bg-success-700 focus:ring-success-500;
  }
  
  .btn-warning {
    @apply bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500;
  }
  
  .btn-danger {
    @apply bg-error-600 text-white hover:bg-error-700 focus:ring-error-500;
  }
  
  .btn-ghost {
    @apply bg-transparent text-white hover:bg-white/10 focus:ring-white/20;
  }
  
  /* Card Components */
  .card {
    @apply bg-dark-800/50 backdrop-blur-sm border border-dark-700 rounded-card p-6 shadow-card-dark;
  }
  
  .card-gradient {
    @apply relative overflow-hidden;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  }
  
  /* Enhanced Balance Card with modern gradient */
  .balance-card {
    @apply relative rounded-2xl p-6 text-white shadow-2xl overflow-hidden;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #075985 100%);
  }
  
  .balance-card::before {
    content: '';
    @apply absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -translate-y-20 translate-x-20;
  }
  
  .balance-card::after {
    content: '';
    @apply absolute bottom-0 left-0 w-24 h-24 bg-white/5 rounded-full translate-y-12 -translate-x-12;
  }
  
  /* Form Components */
  .form-input {
    @apply w-full px-4 py-3 bg-dark-800 border border-dark-600 rounded-button text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-300 mb-2;
  }
  
  /* Enhanced Quick Action Buttons */
  .quick-action {
    @apply flex flex-col items-center justify-center p-4 bg-dark-800/50 backdrop-blur-sm border border-dark-700 rounded-2xl hover:bg-dark-700/50 transition-all duration-300 active:scale-95;
  }
  
  .quick-action-icon {
    @apply w-14 h-14 mb-3 rounded-2xl flex items-center justify-center text-xl shadow-lg;
  }
  
  /* Enhanced Transaction List */
  .transaction-item {
    @apply flex items-center justify-between p-4 bg-dark-800/30 backdrop-blur-sm border border-dark-700/50 rounded-2xl hover:bg-dark-700/30 transition-all duration-200;
  }
  
  .transaction-icon {
    @apply w-12 h-12 rounded-2xl flex items-center justify-center text-lg shadow-sm;
  }
  
  /* Enhanced Bottom Navigation */
  .bottom-nav {
    @apply fixed bottom-0 left-0 right-0 bg-dark-900/95 backdrop-blur-xl border-t border-dark-700/50 px-4 py-3 shadow-2xl;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
  }
  
  .bottom-nav-item {
    @apply flex flex-col items-center justify-center py-2 px-1 text-xs transition-all duration-200;
  }
  
  .bottom-nav-item.active {
    @apply text-primary-400;
  }
  
  .bottom-nav-item:not(.active) {
    @apply text-gray-500 hover:text-gray-300;
  }
  
  /* Status Badges */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .status-success {
    @apply bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-400;
  }
  
  .status-pending {
    @apply bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-400;
  }
  
  .status-failed {
    @apply bg-error-100 text-error-800 dark:bg-error-900/30 dark:text-error-400;
  }
  
  /* Mobile Specific */
  .mobile-container {
    @apply max-w-sm mx-auto bg-dark-950 min-h-screen relative;
  }
  
  .mobile-header {
    @apply sticky top-0 z-50 bg-dark-950/95 backdrop-blur-lg border-b border-dark-800 px-4 py-3;
  }
  
  .mobile-content {
    @apply px-4 pb-24; /* Bottom padding for bottom nav */
  }
  
  /* Desktop Layout */
  .desktop-layout {
    @apply hidden lg:flex lg:min-h-screen lg:bg-dark-950;
  }
  
  .desktop-sidebar {
    @apply w-64 bg-dark-900/50 backdrop-blur-lg border-r border-dark-700/50 flex flex-col;
  }
  
  .desktop-main {
    @apply flex-1 flex flex-col lg:flex-row;
  }
  
  .desktop-content {
    @apply flex-1 p-6 overflow-y-auto;
  }
  
  .desktop-transaction-feed {
    @apply w-80 bg-dark-900/30 backdrop-blur-sm border-l border-dark-700/50 p-6 overflow-y-auto;
  }
}

/* Utility Classes */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .animate-pulse-gentle {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .gradient-text {
    @apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
  }
  
  /* Custom scrollbar */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(75 85 99) transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99);
    border-radius: 3px;
  }
}

/* Animation Keyframes */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Mobile-first responsive breakpoints */
@media (max-width: 640px) {
  .mobile-only {
    @apply block;
  }
  
  .desktop-only {
    @apply hidden;
  }
}

@media (min-width: 641px) {
  .mobile-only {
    @apply hidden;
  }
  
  .desktop-only {
    @apply block;
  }
}