/**
 * Gradient Utility Classes
 * Comprehensive collection of gradient backgrounds using your brand colors and more
 */

/* ========================================
   PRIMARY BRAND GRADIENTS (Green Theme)
   ======================================== */

/* Main brand gradient - used in wallet */
.bg-gradient-to-r.from-green-500.to-green-600 {
    background: linear-gradient(to right, rgb(34, 197, 94), rgb(22, 163, 74));
}

.bg-gradient-to-br.from-green-400.to-green-600 {
    background: linear-gradient(to bottom right, rgb(74, 222, 128), rgb(22, 163, 74));
}

.bg-gradient-to-tl.from-green-500.to-green-700 {
    background: linear-gradient(to top left, rgb(34, 197, 94), rgb(21, 128, 61));
}

.bg-gradient-green-light {
    background: linear-gradient(135deg, rgb(187, 247, 208), rgb(134, 239, 172));
}

.bg-gradient-green-dark {
    background: linear-gradient(135deg, rgb(22, 163, 74), rgb(20, 83, 45));
}

/* Company primary green gradient */
.bg-gradient-company-green {
    background: linear-gradient(135deg, rgb(100, 167, 96), rgb(80, 147, 76));
}

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

/* Blue gradients */
.bg-gradient-blue {
    background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235));
}

.bg-gradient-blue-light {
    background: linear-gradient(135deg, rgb(147, 197, 253), rgb(96, 165, 250));
}

.bg-gradient-blue-dark {
    background: linear-gradient(135deg, rgb(30, 64, 175), rgb(15, 23, 42));
}

/* Purple gradients */
.bg-gradient-purple {
    background: linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234));
}

.bg-gradient-purple-pink {
    background: linear-gradient(135deg, rgb(168, 85, 247), rgb(236, 72, 153));
}

/* Orange gradients */
.bg-gradient-orange {
    background: linear-gradient(135deg, rgb(251, 146, 60), rgb(249, 115, 22));
}

.bg-gradient-orange-red {
    background: linear-gradient(135deg, rgb(251, 146, 60), rgb(239, 68, 68));
}

/* Red gradients */
.bg-gradient-red {
    background: linear-gradient(135deg, rgb(239, 68, 68), rgb(220, 38, 38));
}

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

/* To Right */
.bg-gradient-to-r-green {
    background: linear-gradient(to right, rgb(34, 197, 94), rgb(22, 163, 74));
}

.bg-gradient-to-r-blue {
    background: linear-gradient(to right, rgb(59, 130, 246), rgb(37, 99, 235));
}

.bg-gradient-to-r-purple {
    background: linear-gradient(to right, rgb(168, 85, 247), rgb(147, 51, 234));
}

/* To Bottom */
.bg-gradient-to-b-green {
    background: linear-gradient(to bottom, rgb(34, 197, 94), rgb(22, 163, 74));
}

.bg-gradient-to-b-blue {
    background: linear-gradient(to bottom, rgb(59, 130, 246), rgb(37, 99, 235));
}

/* To Bottom Right */
.bg-gradient-to-br-green {
    background: linear-gradient(to bottom right, rgb(34, 197, 94), rgb(22, 163, 74));
}

.bg-gradient-to-br-blue {
    background: linear-gradient(to bottom right, rgb(59, 130, 246), rgb(37, 99, 235));
}

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

.bg-gradient-subtle-green {
    background: linear-gradient(135deg, rgb(240, 253, 244), rgb(220, 252, 231));
}

.bg-gradient-subtle-blue {
    background: linear-gradient(135deg, rgb(239, 246, 255), rgb(219, 234, 254));
}

.bg-gradient-subtle-gray {
    background: linear-gradient(135deg, rgb(248, 250, 252), rgb(241, 245, 249));
}

.bg-gradient-subtle-purple {
    background: linear-gradient(135deg, rgb(250, 245, 255), rgb(243, 232, 255));
}

/* ========================================
   SPECIAL EFFECT GRADIENTS
   ======================================== */

/* Glass effect gradients */
.bg-gradient-glass-green {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bg-gradient-glass-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Shimmer effects */
.bg-gradient-shimmer {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }
    100% { background-position: 20px 20px, 20px 30px, 30px 10px, 10px 20px; }
}

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

.text-gradient-green {
    background: linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-rainbow {
    background: linear-gradient(135deg, 
        rgb(239, 68, 68), 
        rgb(251, 146, 60), 
        rgb(250, 204, 21), 
        rgb(34, 197, 94), 
        rgb(59, 130, 246), 
        rgb(168, 85, 247)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.hover-gradient-green:hover {
    background: linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74));
    transition: all 0.3s ease;
}

.hover-gradient-blue:hover {
    background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235));
    transition: all 0.3s ease;
}

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

.border-gradient-green {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgb(34, 197, 94), rgb(22, 163, 74)) border-box;
}

.border-gradient-blue {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235)) border-box;
}

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

.bg-gradient-animated {
    background: linear-gradient(-45deg, 
        rgb(34, 197, 94), 
        rgb(59, 130, 246), 
        rgb(168, 85, 247), 
        rgb(236, 72, 153)
    );
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

/*
Usage Examples:

1. Main wallet card (as used):
<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-6 text-white">

2. Subtle background:
<div class="bg-gradient-subtle-green p-4">

3. Text gradient:
<h1 class="text-gradient-green text-4xl font-bold">

4. Glass effect card:
<div class="bg-gradient-glass-green rounded-lg p-6">

5. Animated background:
<div class="bg-gradient-animated min-h-screen">

6. Border gradient:
<div class="border-gradient-green rounded-lg p-4">

7. Hover effect:
<button class="hover-gradient-green p-3 rounded-lg">

8. Company branded:
<div class="bg-gradient-company-green p-6 text-white">
*/