* {
  /* Theme Colors */
  --primary-color: #4a4d50; /* Slate Gray */
  --primary-color-rgb: 74, 77, 80;
  
  --secondary-color: #ffffff; /* White */
  --secondary-color-rgb: 255, 255, 255;
  
  /* Background Colors */
  --bg-light: #f5f5f5; /* Light Neutral Gray */
  --bg-dark-1: #121212; /* Charcoal Black */
  --bg-dark-1-rgb: 18, 18, 18;
  --bg-dark-2: #1e1e1e; /* Dark Slate Gray */
  --bg-dark-3: #2a2a2a; /* Medium Dark Gray */
  
  /* Text and Headings Colors */
  --body-font-color: #111111; /* Pure/charcoal black for body text */
  --heading-font-color: #000000; /* Pure black for headings */
  --body-font-color-bg-dark: #ffffff; /* White text on dark sections */
  --heading-font-color-bg-dark: #ffffff; /* White headings on dark sections */
  
  /* Layout Colors */
  --footer-background-color: #121212; /* Dark background for footer */
  --border-color: #d1d5db; /* Light gray borders */
}

/* Custom Overrides for White Accent Theme */

/* Selection highlights: White on Charcoal Gray instead of White on White */
::selection {
  background: var(--primary-color);
  color: #ffffff;
}
::-moz-selection {
  background: var(--primary-color);
  color: #ffffff;
}

/* Buttons and elements using white background (--secondary-color) on light layouts:
   make sure text is dark so it remains readable */
.bg-color-2,
.bg-color-secondary,
section.bg-color-2,
a.btn-main.bg-color-2,
a.btn-main.invert,
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus,
.page-item.active .page-link,
.de-marquee-list .d-item-block.bg-color-2 {
  color: #000000 !important;
}

/* Make text/icons inside white card readable */
.bg-color-2 *,
.bg-color-secondary * {
  color: #000000 !important;
}

/* Make icons and inline text in dark-scheme sections readable when using secondary color (white) */
.dark-scheme .id-color-2,
.dark-scheme .id-color-secondary,
.text-light .id-color-2,
.text-light .id-color-secondary,
.section-dark .id-color-2,
.section-dark .id-color-secondary,
#extra-wrap.dark .id-color-2,
footer .id-color-2,
footer .id-color-secondary,
footer .widget a:hover {
  color: #ffffff !important;
}

/* Accent highlight color (id-color-2) default: make it primary gray or black on light layout */
.id-color-2,
.id-color-secondary {
  color: var(--primary-color);
}