/* Color Scheme for I WANT IT Platform
 * Each navigation item has its own distinct color
 * These colors are used consistently across navigation, footer links, and page headers
 */

:root {
  /* Base colors (from existing scheme) */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #3B82F6;
  --secondary: #10B981;
  --secondary-dark: #059669;
  --secondary-light: #34D399;
  
  /* Navigation item colors - Updated as per recommendations */
  --color-home: #3B82F6;        /* Blue */
  --color-how-it-works: #10B981; /* Green */
  --color-listings: #6B7280;    /* Gray */
  --color-featured: #F59E0B;    /* Amber */
  --color-about: #7DD3FC;       /* Baby Blue */
  --color-contact: #EC4899;     /* Pink */
  --color-suggestion: #6366F1;  /* Indigo */
  
  /* Darker variants for hover states */
  --color-home-dark: #2563EB;
  --color-how-it-works-dark: #059669;
  --color-listings-dark: #4B5563;
  --color-featured-dark: #D97706;
  --color-about-dark: #38BDF8;
  --color-contact-dark: #DB2777;
  --color-suggestion-dark: #4F46E5;
  
  /* Lighter variants for backgrounds */
  --color-home-light: #DBEAFE;
  --color-how-it-works-light: #D1FAE5;
  --color-listings-light: #F3F4F6;
  --color-featured-light: #FEF3C7;
  --color-about-light: #E0F2FE;
  --color-contact-light: #FCE7F3;
  --color-suggestion-light: #E0E7FF;
}

/* Navigation link colors */
.nav-link-home { color: var(--color-home) !important; }
.nav-link-how-it-works { color: var(--color-how-it-works) !important; }
.nav-link-listings { color: var(--color-listings) !important; }
.nav-link-featured { color: var(--color-featured) !important; }
.nav-link-about { color: var(--color-about) !important; }
.nav-link-contact { color: var(--color-contact) !important; }
.nav-link-suggestion { color: var(--color-suggestion) !important; }

/* Navigation link hover states */
.nav-link-home:hover { color: var(--color-home-dark) !important; }
.nav-link-how-it-works:hover { color: var(--color-how-it-works-dark) !important; }
.nav-link-listings:hover { color: var(--color-listings-dark) !important; }
.nav-link-featured:hover { color: var(--color-featured-dark) !important; }
.nav-link-about:hover { color: var(--color-about-dark) !important; }
.nav-link-contact:hover { color: var(--color-contact-dark) !important; }
.nav-link-suggestion:hover { color: var(--color-suggestion-dark) !important; }

/* Active navigation link styles */
.nav-link-home.active { 
  color: var(--color-home) !important;
  border-bottom: 3px solid var(--color-home);
}
.nav-link-how-it-works.active { 
  color: var(--color-how-it-works) !important;
  border-bottom: 3px solid var(--color-how-it-works);
}
.nav-link-listings.active { 
  color: var(--color-listings) !important;
  border-bottom: 3px solid var(--color-listings);
}
.nav-link-featured.active { 
  color: var(--color-featured) !important;
  border-bottom: 3px solid var(--color-featured);
}
.nav-link-about.active { 
  color: var(--color-about) !important;
  border-bottom: 3px solid var(--color-about);
}
.nav-link-contact.active { 
  color: var(--color-contact) !important;
  border-bottom: 3px solid var(--color-contact);
}
.nav-link-suggestion.active { 
  color: var(--color-suggestion) !important;
  border-bottom: 3px solid var(--color-suggestion);
}

/* Footer link colors */
.footer-link-home a { color: var(--color-home) !important; }
.footer-link-how-it-works a { color: var(--color-how-it-works) !important; }
.footer-link-listings a { color: var(--color-listings) !important; }
.footer-link-featured a { color: var(--color-featured) !important; }
.footer-link-about a { color: var(--color-about) !important; }
.footer-link-contact a { color: var(--color-contact) !important; }
.footer-link-suggestion a { color: var(--color-suggestion) !important; }

/* Page header background colors */
.page-header-home { background: linear-gradient(135deg, var(--color-home) 0%, var(--color-home-dark) 100%); }
.page-header-how-it-works { background: linear-gradient(135deg, var(--color-how-it-works) 0%, var(--color-how-it-works-dark) 100%); }
.page-header-listings { background: linear-gradient(135deg, var(--color-listings) 0%, var(--color-listings-dark) 100%); }
.page-header-featured { background: linear-gradient(135deg, var(--color-featured) 0%, var(--color-featured-dark) 100%); }
.page-header-about { background: linear-gradient(135deg, var(--color-about) 0%, var(--color-about-dark) 100%); }
.page-header-contact { background: linear-gradient(135deg, var(--color-contact) 0%, var(--color-contact-dark) 100%); }
.page-header-suggestion { background: linear-gradient(135deg, var(--color-suggestion) 0%, var(--color-suggestion-dark) 100%); }

/* Section background colors (subtle) */
.section-home { background-color: var(--color-home-light); }
.section-how-it-works { background-color: var(--color-how-it-works-light); }
.section-listings { background-color: var(--color-listings-light); }
.section-featured { background-color: var(--color-featured-light); }
.section-about { background-color: var(--color-about-light); }
.section-contact { background-color: var(--color-contact-light); }
.section-suggestion { background-color: var(--color-suggestion-light); }

/* Button colors */
.btn-home { 
  background-color: var(--color-home);
  color: white;
}
.btn-home:hover {
  background-color: var(--color-home-dark);
  color: white;
}

.btn-how-it-works { 
  background-color: var(--color-how-it-works);
  color: white;
}
.btn-how-it-works:hover {
  background-color: var(--color-how-it-works-dark);
  color: white;
}

.btn-listings { 
  background-color: var(--color-listings);
  color: white;
}
.btn-listings:hover {
  background-color: var(--color-listings-dark);
  color: white;
}

.btn-featured { 
  background-color: var(--color-featured);
  color: white;
}
.btn-featured:hover {
  background-color: var(--color-featured-dark);
  color: white;
}

.btn-about { 
  background-color: var(--color-about);
  color: white;
}
.btn-about:hover {
  background-color: var(--color-about-dark);
  color: white;
}

.btn-contact { 
  background-color: var(--color-contact);
  color: white;
}
.btn-contact:hover {
  background-color: var(--color-contact-dark);
  color: white;
}

.btn-suggestion { 
  background-color: var(--color-suggestion);
  color: white;
}
.btn-suggestion:hover {
  background-color: var(--color-suggestion-dark);
  color: white;
}