/* Core theme colors */
:root {
    --main-bg-color: #252735;
    --section-bg-color: #27313d;
    --text-color: #e8eaed;  /* Lighter text color for better readability */
    --text-muted: #b0b6be;
    --link-color: #3ef2ff;
    --link-hover-color: #80fbff;
    --card-bg: #323745;
    --primary-color: #3b71ca;
    --heading-color: #3ef2ff; /* Cyan heading color */
  }
  
  /* Base styles */
  body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--main-bg-color);
    color: var(--text-color);
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
  }
  
  /* Section and container styling for better contrast */
  .container, .container-fluid {
    background-color: var(--section-bg-color);
  }
  
  .container p {
    color: var(--text-color);
    line-height: 1.6;  /* Improved line height for readability */
    margin-bottom: 1.2rem;
  }
  
  /* Fix for list items - ensure they have proper color */
  .container ul li,
  .container ol li,
  .container ul li p,
  .container ol li p {
    color: var(--text-color);
    line-height: 1.6;
  }
  
  /* Add spacing between list items for better readability */
  .container ul li,
  .container ol li {
    margin-bottom: 0.5rem;
  }
  
  /* Enhanced heading styles */
  h4[style*="color: #3ef2ff"] {
    color: var(--heading-color) !important;
    font-weight: 500;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }
  
  /* Link styling */
  a {
    color: var(--link-color) !important;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: var(--link-hover-color) !important;
    text-decoration: underline;
  }
  
  /* Footer styling */
  .footer-copyright {
    color: var(--text-color);
  }
  
  /* Navbar styling (complementing nav.css) */
  .navbar {
    background-color: #27313d !important;
  }
  
  /* Make sure all text in containers is properly visible */
  .container * {
    color: var(--text-color);
  }
  
  /* Override for specific text that should have different colors */
  .container h1 span[style*="color"],
  .container h2 span[style*="color"],
  .container h3 span[style*="color"],
  .container h4 span[style*="color"] {
    color: inherit !important;
  }
  
  /* Ensure list markers are visible */
  ul {
    list-style-type: disc;
    padding-left: 2rem;
  }