/* ========================================
   MODERN WEB3 CRYPTO COLOR SCHEME
   Primary: Deep Cyan (#22D3EE) - Modern, clean, easy to read
   Secondary: Electric Purple (#8B5CF6) - Web3 vibe
   Accent: Emerald Green (#10B981) - Success/positive
   ======================================== */

/* CSS Variables Override */
:root {
    --primary-50: #ecfeff;
    --primary-100: #cffafe;
    --primary-200: #a5f3fc;
    --primary-300: #67e8f9;
    --primary-400: #22d3ee;  /* Main Primary - Deep Cyan */
    --primary-500: #06b6d4;
    --primary-600: #0891b2;
    --primary-700: #0e7490;
    --primary-800: #155e75;
    --primary-900: #164e63;
    
    --secondary-50: #f5f3ff;
    --secondary-100: #ede9fe;
    --secondary-200: #ddd6fe;
    --secondary-300: #c4b5fd;
    --secondary-400: #a78bfa;
    --secondary-500: #8b5cf6;  /* Main Secondary - Electric Purple */
    --secondary-600: #7c3aed;
    --secondary-700: #6d28d9;
    --secondary-800: #5b21b6;
    --secondary-900: #4c1d95;
    
    --accent-50: #ecfdf5;
    --accent-100: #d1fae5;
    --accent-200: #a7f3d0;
    --accent-300: #6ee7b7;
    --accent-400: #34d399;
    --accent-500: #10b981;  /* Main Accent - Emerald */
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065f46;
    --accent-900: #064e3b;
    
    --warning: #f59e0b;
    --danger: #ef4444;
    --success: #10b981;
    --info: #22d3ee;
}

/* ========================================
   BACKGROUND COLORS
   ======================================== */

/* Primary Backgrounds */
.bg-primary-50 { background-color: #ecfeff !important; }
.bg-primary-100 { background-color: #cffafe !important; }
.bg-primary-200 { background-color: #a5f3fc !important; }
.bg-primary-300 { background-color: #67e8f9 !important; }
.bg-primary-400 { background-color: #22d3ee !important; }
.bg-primary-500 { background-color: #06b6d4 !important; }
.bg-primary-600 { background-color: #0891b2 !important; }
.bg-primary-700 { background-color: #0e7490 !important; }
.bg-primary-800 { background-color: #155e75 !important; }
.bg-primary-900 { background-color: #164e63 !important; }

/* Secondary Backgrounds */
.bg-secondary-50 { background-color: #f5f3ff !important; }
.bg-secondary-100 { background-color: #ede9fe !important; }
.bg-secondary-200 { background-color: #ddd6fe !important; }
.bg-secondary-300 { background-color: #c4b5fd !important; }
.bg-secondary-400 { background-color: #a78bfa !important; }
.bg-secondary-500 { background-color: #8b5cf6 !important; }
.bg-secondary-600 { background-color: #7c3aed !important; }
.bg-secondary-700 { background-color: #6d28d9 !important; }
.bg-secondary-800 { background-color: #5b21b6 !important; }
.bg-secondary-900 { background-color: #4c1d95 !important; }

/* Accent Backgrounds */
.bg-accent-50 { background-color: #ecfdf5 !important; }
.bg-accent-100 { background-color: #d1fae5 !important; }
.bg-accent-200 { background-color: #a7f3d0 !important; }
.bg-accent-300 { background-color: #6ee7b7 !important; }
.bg-accent-400 { background-color: #34d399 !important; }
.bg-accent-500 { background-color: #10b981 !important; }
.bg-accent-600 { background-color: #059669 !important; }
.bg-accent-700 { background-color: #047857 !important; }
.bg-accent-800 { background-color: #065f46 !important; }
.bg-accent-900 { background-color: #064e3b !important; }

/* Background Opacity Variants */
.bg-primary-400\/10 { background-color: rgba(34, 211, 238, 0.1) !important; }
.bg-primary-400\/20 { background-color: rgba(34, 211, 238, 0.2) !important; }
.bg-primary-400\/30 { background-color: rgba(34, 211, 238, 0.3) !important; }
.bg-primary-400\/50 { background-color: rgba(34, 211, 238, 0.5) !important; }

.bg-secondary-500\/10 { background-color: rgba(139, 92, 246, 0.1) !important; }
.bg-secondary-500\/20 { background-color: rgba(139, 92, 246, 0.2) !important; }
.bg-secondary-500\/30 { background-color: rgba(139, 92, 246, 0.3) !important; }
.bg-secondary-500\/50 { background-color: rgba(139, 92, 246, 0.5) !important; }

.bg-accent-500\/10 { background-color: rgba(16, 185, 129, 0.1) !important; }
.bg-accent-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
.bg-accent-500\/30 { background-color: rgba(16, 185, 129, 0.3) !important; }

/* ========================================
   TEXT COLORS
   ======================================== */

/* Primary Text */
.text-primary-300 { color: #67e8f9 !important; }
.text-primary-400 { color: #22d3ee !important; }
.text-primary-500 { color: #06b6d4 !important; }
.text-primary-600 { color: #0891b2 !important; }
.text-primary-700 { color: #0e7490 !important; }

/* Secondary Text */
.text-secondary-300 { color: #c4b5fd !important; }
.text-secondary-400 { color: #a78bfa !important; }
.text-secondary-500 { color: #8b5cf6 !important; }
.text-secondary-600 { color: #7c3aed !important; }
.text-secondary-700 { color: #6d28d9 !important; }

/* Accent Text */
.text-accent-300 { color: #6ee7b7 !important; }
.text-accent-400 { color: #34d399 !important; }
.text-accent-500 { color: #10b981 !important; }
.text-accent-600 { color: #059669 !important; }
.text-accent-700 { color: #047857 !important; }

/* ========================================
   BORDER COLORS
   ======================================== */

/* Primary Borders */
.border-primary-400 { border-color: #22d3ee !important; }
.border-primary-500 { border-color: #06b6d4 !important; }
.border-primary-600 { border-color: #0891b2 !important; }
.border-primary-400\/30 { border-color: rgba(34, 211, 238, 0.3) !important; }
.border-primary-400\/50 { border-color: rgba(34, 211, 238, 0.5) !important; }

/* Secondary Borders */
.border-secondary-400 { border-color: #a78bfa !important; }
.border-secondary-500 { border-color: #8b5cf6 !important; }
.border-secondary-600 { border-color: #7c3aed !important; }
.border-secondary-500\/30 { border-color: rgba(139, 92, 246, 0.3) !important; }
.border-secondary-500\/50 { border-color: rgba(139, 92, 246, 0.5) !important; }

/* Accent Borders */
.border-accent-400 { border-color: #34d399 !important; }
.border-accent-500 { border-color: #10b981 !important; }
.border-accent-600 { border-color: #059669 !important; }

/* ========================================
   GRADIENTS
   ======================================== */

.bg-gradient-primary {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.bg-gradient-accent {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.bg-gradient-web3 {
    background: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 50%, #10b981 100%) !important;
}

.bg-gradient-crypto {
    background: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%) !important;
}

/* Gradient Text */
.text-gradient-primary {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-web3 {
    background: linear-gradient(135deg, #22d3ee, #8b5cf6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   RING/FOCUS COLORS
   ======================================== */

.focus\:ring-primary-400:focus {
    --tw-ring-color: #22d3ee !important;
}

.focus\:ring-primary-500:focus {
    --tw-ring-color: #06b6d4 !important;
}

.focus\:ring-secondary-500:focus {
    --tw-ring-color: #8b5cf6 !important;
}

.focus\:ring-accent-500:focus {
    --tw-ring-color: #10b981 !important;
}

.focus\:border-primary-400:focus {
    border-color: #22d3ee !important;
}

.focus\:border-secondary-500:focus {
    border-color: #8b5cf6 !important;
}

/* ========================================
   HOVER STATES
   ======================================== */

.hover\:bg-primary-500:hover {
    background-color: #06b6d4 !important;
}

.hover\:bg-primary-600:hover {
    background-color: #0891b2 !important;
}

.hover\:bg-secondary-600:hover {
    background-color: #7c3aed !important;
}

.hover\:bg-secondary-700:hover {
    background-color: #6d28d9 !important;
}

.hover\:bg-accent-600:hover {
    background-color: #059669 !important;
}

.hover\:text-primary-400:hover {
    color: #22d3ee !important;
}

.hover\:text-secondary-400:hover {
    color: #a78bfa !important;
}

.hover\:text-accent-400:hover {
    color: #34d399 !important;
}

.hover\:border-primary-400:hover {
    border-color: #22d3ee !important;
}

.hover\:border-secondary-500:hover {
    border-color: #8b5cf6 !important;
}

/* ========================================
   SHADOW COLORS
   ======================================== */

.shadow-primary-400\/20 {
    box-shadow: 0 10px 15px -3px rgba(34, 211, 238, 0.2), 0 4px 6px -4px rgba(34, 211, 238, 0.1) !important;
}

.shadow-primary-400\/30 {
    box-shadow: 0 10px 15px -3px rgba(34, 211, 238, 0.3), 0 4px 6px -4px rgba(34, 211, 238, 0.2) !important;
}

.shadow-secondary-500\/20 {
    box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(139, 92, 246, 0.1) !important;
}

.shadow-secondary-500\/30 {
    box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3), 0 4px 6px -4px rgba(139, 92, 246, 0.2) !important;
}

.hover\:shadow-primary-400\/40:hover {
    box-shadow: 0 20px 25px -5px rgba(34, 211, 238, 0.4), 0 8px 10px -6px rgba(34, 211, 238, 0.2) !important;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn-primary {
    background-color: #22d3ee !important;
    color: #000 !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #06b6d4 !important;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4) !important;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #8b5cf6 !important;
    color: #fff !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #7c3aed !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4) !important;
    transform: translateY(-2px);
}

.btn-accent {
    background-color: #10b981 !important;
    color: #fff !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: #059669 !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-2px);
}

.btn-outline-primary {
    background-color: transparent !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #22d3ee !important;
    color: #000 !important;
}

/* ========================================
   GLOW EFFECTS
   ======================================== */

.glow-primary {
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.glow-primary:hover {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.5);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.glow-secondary:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

.glow-accent {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.glow-accent:hover {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes pulse-glow-cyan {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(34, 211, 238, 0.6);
    }
}

@keyframes pulse-glow-purple {
    0%, 100% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
    }
}

.animate-pulse-glow-cyan {
    animation: pulse-glow-cyan 2s infinite;
}

.animate-pulse-glow-purple {
    animation: pulse-glow-purple 2s infinite;
}

/* ========================================
   ACCENT COLOR OVERRIDES
   ======================================== */

/* Override default blue with cyan */
input:focus, textarea:focus, select:focus {
    border-color: #22d3ee !important;
    --tw-ring-color: rgba(34, 211, 238, 0.5) !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
}

/* ========================================
   USAGE EXAMPLES
   ======================================== */

/*
Example HTML Usage:

<!-- Primary Button -->
<button class="btn-primary px-6 py-3 rounded-lg">
    Connect Wallet
</button>

<!-- Secondary Card with Glow -->
<div class="bg-secondary-500/10 border border-secondary-500/30 rounded-xl p-6 glow-secondary">
    Content here
</div>

<!-- Gradient Text -->
<h1 class="text-4xl font-bold text-gradient-web3">
    Web3 Crypto Exchange
</h1>

<!-- Accent Success Message -->
<div class="bg-accent-500/20 border-l-4 border-accent-500 p-4">
    Transaction successful!
</div>

<!-- Primary Hover Card -->
<div class="bg-gray-800 border border-primary-400/30 rounded-xl p-6 hover:border-primary-400 hover:shadow-primary-400/40 transition-all">
    Hover me
</div>
*/