/*
 * AfroConnects Brand Colors
 * Updated: October 11, 2025
 * 
 * Primary Colors:
 * - Dark Green: #044b0d (Deep forest green)
 * - Bright Green: #0cb318 (Vibrant lime green)
 */

:root {
    /* Brand Colors */
    --color-primary-dark: #0a6b11;
    --color-primary-bright: #0cb318;
    --color-primary-hover: #139935;
    --color-primary-light: #0dff1f;
    
    /* Legacy blue (for backwards compatibility) */
    --color-legacy-blue: #1d9bf0;
    
    /* Semantic Colors */
    --color-success: #0cb318;
    --color-link: #0cb318;
    --color-accent: #097718;
    
    /* Color with opacity */
    --color-primary-10: rgba(12, 179, 24, 0.1);
    --color-primary-20: rgba(12, 179, 24, 0.2);
    --color-primary-30: rgba(12, 179, 24, 0.3);
}

/* Override Twitter blue with AfroConnects green */
/* EXCEPTION: Keep verified badge as Twitter blue for recognition */
.text-\[\#1d9bf0\]:not(.verified-badge) {
    color: var(--color-primary-bright) !important;
}

/* Verified badge MUST stay Twitter blue */
.verified-badge.text-\[\#1d9bf0\],
svg.verified-badge.text-\[\#1d9bf0\],
svg.verified-badge {
    color: #1d9bf0 !important;
}

/* Admin badge status indicators stay blue */
span[title*="Admin"].bg-blue-500\/20,
span[title*="granted"].bg-blue-500\/20,
span[title*="Earned"].bg-blue-500\/20,
span[title*="posts"].bg-blue-500\/20 {
    background-color: rgba(29, 155, 240, 0.2) !important;
}

span[title*="Admin"].text-\[\#1d9bf0\],
span[title*="granted"].text-\[\#1d9bf0\],
span[title*="Earned"].text-\[\#1d9bf0\],
span[title*="posts"].text-\[\#1d9bf0\] {
    color: #1d9bf0 !important;
}

.bg-\[\#1d9bf0\] {
    background-color: var(--color-primary-bright) !important;
}

.border-\[\#1d9bf0\] {
    border-color: var(--color-primary-bright) !important;
}

.hover\:bg-\[\#1d9bf0\]:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Button styles with new brand colors */
.btn-primary {
    background-color: var(--color-primary-bright);
    color: white;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-primary:active {
    background-color: var(--color-primary-dark);
}

/* Link styles */
a.brand-link {
    color: var(--color-primary-bright);
}

a.brand-link:hover {
    color: var(--color-primary-light);
}

/* Badge/Tag styles */
.badge-primary {
    background-color: var(--color-primary-10);
    color: var(--color-primary-bright);
}

/* Focus states */
.focus-brand:focus {
    outline-color: var(--color-primary-bright);
    border-color: var(--color-primary-bright);
}

/* Gradient backgrounds */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-bright) 100%);
}

.bg-gradient-brand-reverse {
    background: linear-gradient(135deg, var(--color-primary-bright) 0%, var(--color-primary-dark) 100%);
}

/* Accent backgrounds */
.bg-brand-dark {
    background-color: var(--color-primary-dark);
}

.bg-brand-bright {
    background-color: var(--color-primary-bright);
}

.text-brand-dark {
    color: var(--color-primary-dark);
}

.text-brand-bright {
    color: var(--color-primary-bright);
}

/* Border colors */
.border-brand-dark {
    border-color: var(--color-primary-dark);
}

.border-brand-bright {
    border-color: var(--color-primary-bright);
}

/* Hover effects */
.hover\:bg-brand-bright:hover {
    background-color: var(--color-primary-bright);
}

.hover\:bg-brand-hover:hover {
    background-color: var(--color-primary-hover);
}

.hover\:text-brand-bright:hover {
    color: var(--color-primary-bright);
}

/* Ring colors for focus states */
.ring-brand {
    --tw-ring-color: var(--color-primary-bright);
}

/* Verified badge color override */
.verified-badge {
    color: var(--color-primary-bright) !important;
}

/* Navigation active states */
.nav-active {
    color: var(--color-primary-bright);
    border-bottom-color: var(--color-primary-bright);
}

/* Form elements */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary-bright);
    --tw-ring-color: var(--color-primary-20);
}

/* Buttons - Global override - ALL BLUES TO GREEN */
button.bg-blue-500,
button.bg-blue-600,
button.bg-blue-700,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-\[#1d9bf0\] {
    background-color: var(--color-primary-bright) !important;
}

button.bg-blue-500:hover,
button.bg-blue-600:hover,
button.bg-blue-700:hover,
.bg-blue-500:hover,
.bg-blue-600:hover,
.bg-blue-700:hover,
button.hover\:bg-blue-600:hover,
button.hover\:bg-blue-700:hover,
button.hover\:bg-blue-800:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Text colors - ALL BLUES TO GREEN */
/* EXCEPTION: Keep badge status indicators as blue in admin */
.text-blue-300:not([title*="badge"]):not([title*="Badge"]),
.text-blue-400:not([title*="badge"]):not([title*="Badge"]),
.text-blue-500:not([title*="badge"]):not([title*="Badge"]),
.text-blue-600:not([title*="badge"]):not([title*="Badge"]),
.text-blue-700:not([title*="badge"]):not([title*="Badge"]),
.hover\:text-blue-400:hover:not([title*="badge"]):not([title*="Badge"]),
.hover\:text-blue-500:hover:not([title*="badge"]):not([title*="Badge"]),
.hover\:text-blue-600:hover:not([title*="badge"]):not([title*="Badge"]),
a[class*="text-blue"]:not([title*="badge"]):not([title*="Badge"]) {
    color: var(--color-primary-bright) !important;
}

/* Border colors - ALL BLUES TO GREEN */
.border-blue-400,
.border-blue-500,
.border-blue-600,
.border-blue-700,
.focus\:border-blue-500:focus,
.focus\:border-blue-600:focus {
    border-color: var(--color-primary-bright) !important;
}

/* Ring colors - ALL BLUES TO GREEN */
.ring-blue-500,
.ring-blue-600,
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus {
    --tw-ring-color: var(--color-primary-bright) !important;
}

/* Background opacity variants */
/* EXCEPTION: Keep badge status backgrounds as blue in admin */
.bg-blue-500\/10:not([title*="badge"]):not([title*="Badge"]),
.bg-blue-500\/20:not([title*="badge"]):not([title*="Badge"]),
.bg-blue-600\/10:not([title*="badge"]):not([title*="Badge"]),
.bg-blue-600\/20:not([title*="badge"]):not([title*="Badge"]) {
    background-color: var(--color-primary-10) !important;
}

.bg-blue-500\/30:not([title*="badge"]):not([title*="Badge"]) {
    background-color: var(--color-primary-30) !important;
}

/* Force badge status indicators to stay blue */
span[title*="badge"] .bg-blue-500\/20,
span[title*="Badge"] .bg-blue-500\/20,
span[class*="badge"].bg-blue-500\/20 {
    background-color: rgba(29, 155, 240, 0.2) !important;
}

span[title*="badge"].text-\[\#1d9bf0\],
span[title*="Badge"].text-\[\#1d9bf0\] {
    color: #1d9bf0 !important;
}

/* Admin panel colors */
.admin-accent {
    background-color: var(--color-primary-dark);
}

.admin-highlight {
    color: var(--color-primary-bright);
}

/* Loading states */
.loading-brand {
    border-color: var(--color-primary-20);
    border-top-color: var(--color-primary-bright);
}

/* Success messages */
.alert-success {
    background-color: var(--color-primary-10);
    border-color: var(--color-primary-bright);
    color: var(--color-primary-dark);
}

/* Pill/Badge styles */
.pill-brand {
    background-color: var(--color-primary-10);
    color: var(--color-primary-bright);
    border: 1px solid var(--color-primary-20);
}

/* Shadow effects with brand color */
.shadow-brand {
    box-shadow: 0 4px 6px -1px rgba(12, 179, 24, 0.1), 
                0 2px 4px -1px rgba(12, 179, 24, 0.06);
}

.shadow-brand-lg {
    box-shadow: 0 10px 15px -3px rgba(12, 179, 24, 0.1), 
                0 4px 6px -2px rgba(12, 179, 24, 0.05);
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-bright);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-hover);
}

/* Selection color */
::selection {
    background-color: var(--color-primary-20);
    color: var(--color-primary-dark);
}

::-moz-selection {
    background-color: var(--color-primary-20);
    color: var(--color-primary-dark);
}

/* ============================================================================
   COMPREHENSIVE BLUE-TO-GREEN CONVERSION
   Catches ALL blue elements and converts them to AfroConnects green
   ============================================================================ */

/* All link colors */
a:not([class*="text-"]):not([class*="no-brand"]) {
    color: var(--color-primary-bright);
}

a:not([class*="text-"]):not([class*="no-brand"]):hover {
    color: var(--color-primary-light);
}

/* Navigation active states */
nav a.active,
nav a[aria-current="page"],
.nav-link.active {
    color: var(--color-primary-bright) !important;
    border-bottom-color: var(--color-primary-bright) !important;
}

/* Tab active states */
.tab-active,
[role="tab"][aria-selected="true"] {
    color: var(--color-primary-bright) !important;
    border-bottom-color: var(--color-primary-bright) !important;
}

/* Button primary variations */
.btn,
.button,
button[type="submit"]:not(.btn-danger):not(.btn-secondary),
input[type="submit"]:not(.btn-danger):not(.btn-secondary) {
    background-color:#0a6b11;
    color: white;
}

.btn:hover,
.button:hover,
button[type="submit"]:not(.btn-danger):not(.btn-secondary):hover,
input[type="submit"]:not(.btn-danger):not(.btn-secondary):hover {
    background-color: var(--color-primary-hover);
}

/* OAuth buttons brand colors */
.oauth-button,
.social-login-btn {
    border-color: var(--color-primary-bright);
}

.oauth-button:hover,
.social-login-btn:hover {
    background-color: var(--color-primary-10);
    border-color: var(--color-primary-bright);
}

/* Active/Selected states */
.active,
.selected,
[aria-selected="true"],
[aria-current="page"] {
    color: var(--color-primary-bright) !important;
}

/* Checkbox and radio when checked */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--color-primary-bright);
    border-color: var(--color-primary-bright);
}

/* Progress bars */
.progress-bar,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
    background-color: var(--color-primary-bright);
}

/* Badges and pills */
.badge,
.pill,
.tag {
    background-color: var(--color-primary-10);
    color: var(--color-primary-bright);
    border-color: var(--color-primary-20);
}

/* Tooltips */
.tooltip {
    background-color: var(--color-primary-dark);
}

/* Dropdown active items */
.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--color-primary-10);
    color: var(--color-primary-bright);
}

/* Card highlights */
.card-highlight,
.card:hover {
    border-color: var(--color-primary-bright);
}

/* Logo and branding elements */
.logo-text,
.brand-text,
.site-name {
    color: var(--color-primary-bright);
}

/* Icons with brand color */
.icon-primary,
svg.text-primary {
    color: var(--color-primary-bright) !important;
    fill: var(--color-primary-bright) !important;
}

/* Underline effects */
.underline-brand,
a:hover .underline {
    text-decoration-color: var(--color-primary-bright);
}

/* Dividers with brand color */
.divider-brand,
hr.brand {
    border-color: var(--color-primary-bright);
}

/* Success states (use green naturally) */
.success,
.alert-success,
.text-success {
    color: var(--color-primary-bright);
}

.bg-success {
    background-color: var(--color-primary-10);
}

/* Focus visible states */
*:focus-visible {
    outline-color: var(--color-primary-bright);
    outline-offset: 2px;
}

/* Placeholder text with brand tint */
::placeholder {
    color: rgba(12, 179, 24, 0.4);
}

/* Slider/Range inputs */
input[type="range"]::-webkit-slider-thumb {
    background-color: var(--color-primary-bright);
}

input[type="range"]::-moz-range-thumb {
    background-color: var(--color-primary-bright);
}

input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--color-primary-20);
}

input[type="range"]::-moz-range-track {
    background-color: var(--color-primary-20);
}

/* Loading spinners */
.spinner,
.loading-spinner {
    border-top-color: var(--color-primary-bright);
    border-right-color: var(--color-primary-bright);
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, 
        var(--color-primary-10) 25%, 
        var(--color-primary-20) 50%, 
        var(--color-primary-10) 75%
    );
}

/* Toggle switches */
.toggle:checked,
.switch:checked {
    background-color: var(--color-primary-bright);
}

/* Pagination active */
.pagination .active,
.page-item.active .page-link {
    background-color: var(--color-primary-bright);
    border-color: var(--color-primary-bright);
}

/* Timeline events */
.timeline-event::before {
    background-color: var(--color-primary-bright);
}

/* Quote/Blockquote accents */
blockquote {
    border-left-color: var(--color-primary-bright);
}

/* Code blocks accent */
pre code {
    border-left: 3px solid var(--color-primary-bright);
}

/* Step indicators */
.step.active,
.step.completed {
    background-color: var(--color-primary-bright);
    border-color: var(--color-primary-bright);
}

/* Rating stars (if using blue) */
.star.active,
.rating-star.filled {
    color: var(--color-primary-bright);
}

/* Notification dots */
.notification-dot,
.badge-notification {
    background-color: var(--color-primary-bright);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}