:root {
    /* Custom Primary Colors */
    --color-primary: #009cff;
    --color-primary-rgb: 0, 156, 255;
    --color-primary-light: #33afff;
    --color-primary-dark: #007ccc;
    
    /* Custom Secondary Colors */
    --color-secondary: #009cff;
    --color-secondary-rgb: 0, 156, 255;
    --color-secondary-light: #33afff;
    --color-secondary-dark: #007ccc;
}

/* Apply custom colors to green elements */
.text-green-600,
.text-green-500 {
    color: var(--color-primary) !important;
}

.text-green-400 {
    color: var(--color-primary-light) !important;
}

.bg-green-600,
.bg-green-500 {
    background-color: var(--color-primary) !important;
}

.bg-green-400 {
    background-color: var(--color-primary-light) !important;
}

.border-green-600,
.border-green-500 {
    border-color: var(--color-primary) !important;
}

.hover\:text-green-600:hover,
.hover\:text-green-500:hover {
    color: var(--color-secondary) !important;
}

.hover\:bg-green-600:hover,
.hover\:bg-green-500:hover {
    background-color: var(--color-secondary) !important;
}

.hover\:bg-green-700:hover {
    background-color: var(--color-secondary-dark) !important;
}

/* Focus states */
.focus\:ring-green-500:focus {
    --tw-ring-color: rgba(var(--color-primary-rgb), 0.5) !important;
}

.focus\:border-green-500:focus {
    border-color: var(--color-primary) !important;
}