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

/* TODO: Add custom CSS variables for theming */
:root {
    --primary-color: #1f2937;
    --secondary-color: #3b82f6;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --light-bg: #f9fafb;
    --dark-bg: #111827;
}

/* TODO: Add responsive design styles */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--primary-color);
}

/* TODO: Add component styles */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.card {
    @apply bg-white rounded-lg shadow-sm border p-6;
}

/* TODO: Add dashboard specific styles */
.dashboard-card {
    @apply bg-white rounded-lg shadow-sm border p-6 hover:shadow-md transition-shadow;
}

.wallet-balance {
    @apply text-3xl font-bold text-gray-900;
}

.transaction-item {
    @apply flex justify-between items-center py-3 border-b border-gray-100 last:border-b-0;
}

/* TODO: Add mobile-responsive styles */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .dashboard-grid {
        @apply grid-cols-1 gap-4;
    }
}

/* TODO: Add loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

/* TODO: Add notification styles */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.alert-warning {
    @apply bg-yellow-50 text-yellow-800 border border-yellow-200;
}

/* TODO: Add form validation styles */
.form-error {
    @apply border-red-300 focus:ring-red-500;
}

.error-message {
    @apply text-red-600 text-sm mt-1;
}