/**
 * Custom Tech Colors - Modern, Masculine Design System
 * A sleek, tech-focused color scheme with deep blues and strong greens
 */

:root {
  /* Primary Colors - Changed from Emerald to Blue */
  --color-primary: #3B82F6; /* Blue-500 - Primary brand color (formerly Emerald-500) */
  --color-primary-dark: #2563EB; /* Blue-600 - Darker shade for hover states (formerly Emerald-600) */
  --color-primary-light: #60A5FA; /* Blue-400 - Lighter shade for highlights (formerly Emerald-400) */
  --color-primary-bg: rgba(59, 130, 246, 0.1); /* Subtle background tint */
  
  /* Secondary Colors */
  --color-secondary: #0F172A; /* Slate-900 - Secondary brand color (dark blue) */
  --color-secondary-dark: #0B1222; /* Darker slate - Hover states */
  --color-secondary-light: #1E293B; /* Slate-800 - Lighter shade for accents */
  
  /* Accent Colors - Keep as-is */
  --color-accent: #3B82F6; /* Blue-500 - For special highlights */
  --color-accent-dark: #2563EB; /* Blue-600 - Darker blue */
  --color-accent-light: #60A5FA; /* Blue-400 - Lighter blue */
  
  /* UI State Colors - Update success state to blue */
  --color-success: #3B82F6; /* Blue-500 - Success state (formerly Emerald-500) */
  --color-warning: #F59E0B; /* Amber-500 - Warning state */
  --color-error: #EF4444; /* Red-500 - Error state */
  --color-info: #3B82F6; /* Blue-500 - Information state */
  
  /* Background Colors */
  --color-bg-primary: #0F172A; /* Slate-900 - Main background */
  --color-bg-secondary: #1E293B; /* Slate-800 - Secondary background */
  --color-bg-tertiary: #334155; /* Slate-700 - Tertiary background */
  --color-bg-elevated: #475569; /* Slate-600 - Elevated elements */
  
  /* Text Colors */
  --color-text-primary: #E2E8F0; /* Slate-200 - Primary text */
  --color-text-secondary: #94A3B8; /* Slate-400 - Secondary text */
  --color-text-muted: #64748B; /* Slate-500 - Muted/helper text */
  --color-text-bright: #F8FAFC; /* Slate-50 - Bright text for emphasis */
  
  /* Border Colors */
  --color-border-primary: #334155; /* Slate-700 - Primary borders */
  --color-border-light: #475569; /* Slate-600 - Lighter borders */
  
  /* Shadow/Glow Effects - Update emerald glow to blue */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --glow-blue: 0 0 15px rgba(59, 130, 246, 0.5);
  --glow-slate: 0 0 15px rgba(15, 23, 42, 0.5);
  
  /* Gradients - Update primary gradient to blue */
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-secondary: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --gradient-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --gradient-background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  --gradient-button-hover: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Dark mode color adjustments (default is already dark) */
@media (prefers-color-scheme: dark) {
  /* Colors are already optimized for dark mode */
}

/* Utility classes for using these colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }
.text-info { color: var(--color-info); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-error { background-color: var(--color-error); }
.bg-info { background-color: var(--color-info); }

.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent); }

.shadow-glow-primary { box-shadow: var(--glow-blue); }
.shadow-glow-secondary { box-shadow: var(--glow-slate); }
.shadow-glow-accent { box-shadow: var(--glow-blue); }

.gradient-primary { background-image: var(--gradient-primary); }
.gradient-secondary { background-image: var(--gradient-secondary); }
.gradient-accent { background-image: var(--gradient-accent); }
.gradient-warning { background-image: var(--gradient-warning); }
.gradient-background { background-image: var(--gradient-background); }

/* Global color overrides for consistency */
/* These take highest priority to ensure consistent colors across the site */

/* Make sure all emerald/blue colors are consistent */
.text-emerald-300, 
.hover\:text-emerald-300:hover,
.text-emerald-400, 
.hover\:text-emerald-400:hover,
.text-emerald-500, 
.hover\:text-emerald-500:hover {
  color: var(--color-primary) !important;
}

/* Standardize blue colors */
.text-blue-400,
.hover\:text-blue-400:hover,
.text-blue-500,
.hover\:text-blue-500:hover,
.text-blue-600,
.hover\:text-blue-600:hover,
.text-cyan-300,
.hover\:text-cyan-300:hover,
.text-cyan-400,
.hover\:text-cyan-400:hover,
.text-cyan-500,
.hover\:text-cyan-500:hover {
  color: var(--color-primary) !important;
}

/* Fix any cyan button focus */
[class*="btn"]:focus {
  outline-color: var(--color-primary) !important;
}

/* Make sure all buttons have white text */
.btn, 
button[class*="btn"], 
a[class*="btn"] {
  color: #FFFFFF !important;
}

/* 
 * Custom Color Overrides
 * These are the highest-priority color overrides for the site
 * Will take precedence over all other styling
 */

/* Make all links in the site use blue color */
a:not(.btn):not([class*="btn"]):not(.nav-item):not([class*="text-white"]):not([class*="text-gray"]) {
    color: #3B82F6 !important; /* Blue-500 */
}

a:not(.btn):not([class*="btn"]):not(.nav-item):not([class*="text-white"]):not([class*="text-gray"]):hover {
    color: #2563EB !important; /* Blue-600 */
}

/* Extra-strong footer link overrides */
footer a[href="terms.php"],
footer a[href="privacy.php"] {
    color: #94A3B8 !important; /* slate-400 */
    text-decoration: none !important;
}

footer a[href="terms.php"]:hover,
footer a[href="privacy.php"]:hover {
    color: #3B82F6 !important; /* Blue-500 */
    text-decoration: none !important;
}

/* Make sure all buttons have white text */
.btn, 
button[class*="btn"], 
a[class*="btn"],
a.btn,
button.btn,
a[class*="bg-red"],
a.bg-red-600,
a.bg-red-700 {
    color: #FFFFFF !important; /* White */
    text-decoration: none !important;
}

/* Make sure the Do Not Sell button always has white text */
.bg-red-600,
.bg-red-700,
.hover\:bg-red-700:hover,
a[href="#your-rights"].bg-red-600 {
    color: #FFFFFF !important; /* White */
    text-decoration: none !important;
}

/* Force all button children to have white text */
.btn *, 
button[class*="btn"] *, 
a[class*="btn"] *,
a.btn *,
button.btn *,
a[class*="bg-red"] *,
a.bg-red-600 *,
a.bg-red-700 * {
    color: #FFFFFF !important; /* White */
}

/* 
 * ENHANCED LINK VISIBILITY
 * Improves readability of links on dark backgrounds
 * Applied site-wide for consistent user experience
 */

/* Base link color - brighter blue for better visibility on dark backgrounds */
a:not(.btn):not([class*="btn"]):not(.nav-item):not([class*="nav-"]):not(.freestyle-name) {
    color: #60a5fa !important; /* bright-blue-400 */
    transition: color 0.2s ease-in-out;
}

/* Hover state - slightly lighter for visual feedback */
a:not(.btn):not([class*="btn"]):not(.nav-item):not([class*="nav-"]):not(.freestyle-name):hover {
    color: #93c5fd !important; /* bright-blue-300 */
    text-decoration: underline;
}

/* Navigation links in header and footer - lighter color for better contrast */
header .nav-item, 
footer a, 
.mobile-menu a {
    color: #e2e8f0 !important; /* slate-200 */
    text-decoration: none !important; /* Ensure no underline */
}

header .nav-item:hover, 
footer a:hover,
.mobile-menu a:hover {
    color: #60a5fa !important; /* bright-blue-400 */
    text-decoration: none !important; /* Ensure no underline on hover */
}

/* Specifically target header nav items to ensure no text decoration */
header a.nav-item,
header a.nav-item:hover,
header a.nav-item:active,
header a.nav-item:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Expertise and Experience section tags */
.expertise-tag, 
.experience-tag {
    color: #60a5fa !important; /* bright-blue-400 */
}

/* Highlighted text in cards and content */
.highlight, 
.text-blue-400, 
.text-cyan-400 {
    color: #60a5fa !important; /* bright-blue-400 */
}

/* Card links and interactive elements */
.flip-trigger, 
.service-title, 
.back-trigger,
.expand-btn {
    color: #60a5fa !important; /* bright-blue-400 */
}

.flip-trigger:hover, 
.back-trigger:hover,
.expand-btn:hover {
    color: #93c5fd !important; /* bright-blue-300 */
}

/* Make sure terms/privacy links are visible */
main a:not(.btn):not([class*="btn"]) {
    color: #60a5fa !important; /* bright-blue-400 */
}

main a:not(.btn):not([class*="btn"]):hover {
    color: #93c5fd !important; /* bright-blue-300 */
}

/* Override any cyan links to use our new blue */
.text-cyan-300, .text-cyan-400, .text-cyan-500,
.hover\:text-cyan-300:hover, .hover\:text-cyan-400:hover, .hover\:text-cyan-500:hover {
    color: #60a5fa !important; /* bright-blue-400 */
}

/* Ensure button text remains white */
.btn, 
button[class*="btn"], 
a[class*="btn"],
a.btn {
    color: #ffffff !important;
}

/* Enhanced focus state for accessibility */
a:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}