/* File path: /css/colors.css */
/* Main website color scheme */

:root {
  /* Primary Colors */
  --primary: #0dcaf0;         /* Deep Blue - main brand color */
  --primary-light: #4776E6;   /* Lighter blue for hover effects */
  --primary-dark: #3a6073;    /* Darker blue for emphasis */
  
  /* Secondary Colors */
  --secondary: #FF5757;       /* Vibrant Red - for CTAs and highlights */
  --secondary-light: #FF7676; /* Lighter red */
  --secondary-dark: #DC2C2C;  /* Darker red */
  
  /* Neutral Colors */
  --neutral-100: #FFFFFF;     /* White */
  --neutral-200: #F5F7FF;     /* Light background */
  --neutral-300: #E1E8ED;     /* Border color */
  --neutral-400: #A0AEC0;     /* Light text/icons */
  --neutral-500: #718096;     /* Medium emphasis text */
  --neutral-700: #4A5568;     /* High emphasis text */
  --neutral-900: #1A202C;     /* Headings */
  
  /* Accent/Utility Colors */
  --success: #38B2AC;         /* Success messages */
  --warning: #F6AD55;         /* Warning messages */
  --error: #E53E3E;           /* Error states */
  --info: #4299E1;            /* Info states */
  
  /* Legacy variable mappings (for compatibility) */
  --white: var(--neutral-100);
  --dark-white: var(--neutral-200);
  --btn-bg: var(--primary);
  --a-color: var(--primary);
  --white-bg: var(--neutral-100);
  --primary-bg-1: var(--secondary);
  --hover-color: var(--primary-light);
  --font-color: var(--neutral-900);
}

/* Standard color applications */
body {
  color: var(--neutral-700);
  background-color: var(--neutral-100);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--neutral-900);
}

a {
  color: var(--primary);
  transition: color 0.3s ease;
}

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

/* Button Styles */
.btn-primary, .btn-action, .custom-btn {
  background: var(--primary);
  color: var(--neutral-100);
  border: none;
  transition: all 0.3s ease;
}



.btn-secondary {
  background: var(--secondary);
  color: var(--neutral-100);
}



/* Call to action buttons */
.btn-cta {
  background: var(--secondary);
  color: var(--neutral-100);
  font-weight: 600;
}



/* Primary Gradients */
.gradient-primary {
  background: linear-gradient(90deg, var(--bs-pink) 0%, var(--bs-gray-700) 100%);
  color: var(--neutral-100);
}

.gradient-secondary {
  background: linear-gradient(90deg, var(--secondary-dark) 0%, var(--secondary) 100%);
  color: var(--neutral-100);
}

/* Section Backgrounds */
.bg-light {
  background-color: var(--neutral-200);
}

.bg-primary {
  background-color: var(--primary);
  color: var(--neutral-100);
}

.bg-secondary {
  background-color: var(--secondary);
  color: var(--neutral-100);
}

/* Card styles */
.card, .tool-card {
  background-color: var(--neutral-100);
  border: 1px solid var(--neutral-300);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Form elements */
input:focus, 
textarea:focus, 
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(37, 87, 214, 0.2) !important;
}

/* Tool Card specific styles */
.tool-card .tool-name {
  color: var(--neutral-900);
}

.tool-card .tool-description {
  color: var(--neutral-700);
}

.tool-card .original-price {
  color: var(--neutral-500);
}

.tool-card .discounted-price {
  color: var(--primary);
  font-weight: 600;
}

/* Badge styles */
.badge-popular {
  background: linear-gradient(90deg, var(--secondary-dark) 0%, var(--secondary) 100%);
}

.badge-new {
  background: linear-gradient(90deg, var(--success) 0%, #4FD1C5 100%);
}

.badge-hot {
  background: linear-gradient(90deg, #F56565 0%, #ED8936 100%);
}

.badge-sale {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

/* Notices and alerts */
.static-notice {
  background-color: var(--secondary-dark);
  color: var(--neutral-100);
}

.notice-label {
  background-color: var(--warning);
  color: var(--neutral-900);
}

.whatsapp-btn {
  background-color: #25D366; /* WhatsApp green */
  color: var(--neutral-100);
}

.whatsapp-btn:hover {
  background-color: #128C7E; /* Darker WhatsApp green */
}

/* FAQ Section */
.custom-faq-tabs .nav-link {
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  border: 1px solid var(--neutral-300);
}

.custom-faq-tabs .nav-link:hover {
  background-color: var(--neutral-200);
  border-color: var(--primary);
}

.custom-faq-tabs .nav-link.active {
  background-color: var(--primary);
  color: var(--neutral-100);
  border-color: var(--primary);
}

.accordion-button:not(.collapsed) {
  background-color: var(--neutral-200);
  color: var(--primary);
}

/* Footer */
.footer {
  background: linear-gradient(90deg, var(--bs-pink) 0%, var(--bs-gray-700) 100%);
  color: var(--neutral-200);
}

.footer-heading {
  color: var(--neutral-100);
}

.footer-links a {
  color: var(--neutral-300);
}

.footer-links a:hover {
  color: var(--neutral-100);
}

/* Feature lists */
.feature-list li i {
  color: var(--primary);
}

/* Progress steps */
.step-number {
  background: linear-gradient(90deg, var(--bs-pink) 0%, var(--bs-gray-700) 100%);
  color: var(--neutral-100);
}

/* Social media links */
.social-link {
  background: linear-gradient(90deg, var(--bs-pink) 0%, var(--bs-gray-700) 100%);
  color: var(--neutral-100);
}