:root {
  --color-blue-dark: #684086;
  --color-blue-primary: #684068;
  --color-blue-light: #ff8a1e;
  --color-blue-background: #dbeafe;
  --color-purple-dark: #ff6600;
  --color-natural-900: #0f172a;
  --color-natural-800: #1e293b;
  --color-natural-700: #ff9a4c;
  --color-natural-600: #ff6600;
  --color-natural-500: #5c1f45;
  --color-natural-400: #8f007c;
  --color-natural-300: #e0d8c8;
  --color-natural-200: #e2e8f0;
  --color-natural-100: #f1f5f9;
  --color-natural-50: #f8fafc;
  --color-green-dark: #5c1f45;
  --color-green-primary: #5c1f45;
  --color-green-background: #bae6d1;
  --color-red-dark: #991b1b;
  --color-red-primary: #e42519;
  --color-red-background: #fee2e2;
  --color-yellow-dark: #e5bc17;
  --color-yellow-primary: #ff8a1e;
  --color-yellow-background: #fff49d;
  --color-screen-splash-background: #ffffff;
  --color-navbar-background: #4a2d69;
  --color-footer-primary-bg: #4a2d69;
  --color-footer-secondary-bg: #4a2d69;
  --color-footer-head-color: #cbd5e1;
  --color-footer-text-color: #e2e8f0;
  --color-footer-link-color: #ffffff;
  --color-footer-icon-color: #ffffff;
  --color-footer-social-icons: #ffffff;
  --color-footer-social-icons-bg: #1a222d;
  --color-white: #ffffff;
  --color-tabby: #3bff9f;
  --color-boxShadow-1: #0000004D;
  --color-boxShadow-2: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.20));
  --color-boxShadow-3: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.10));
}
/* Ensuring logo visibility on dark backgrounds */
.header-logo img, .footer-logo img {
  /* Use a lighter version if background is dark */
  filter: none;
}

/* Example: If header background is dark purple, apply white logo */
.header {
  background-color: var(--primary-purple);
}
.header-logo img {
  content: url('path-to-logo-white.png');
}