@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --clr-blue: #1A91F0;
  --clr-blue-mid: #1170CD;
  --clr-blue-dark: #1A1C6A;
  --clr-white: #fff;
  --clr-bright: #EFF2F9;
  --clr-dark: #1e2532;
  --clr-black: #000;
  --clr-grey: #656e83;
  --clr-green: #084C41;
  --font-poppins: 'Poppins', sans-serif;
  --font-manrope: 'Manrope', sans-serif;
  --transition: all 300ms ease-in-out;
}

body.dark {
  background-color: #121212;
  color: #f0f0f0;
}

body.dark .bg-white,
body.dark .bg-bright,
body.dark .bg-grey,
body.dark .bg-blue,
body.dark .bg-blue-mid {
  background-color: #1e1e1e !important;
}

body.dark .text-dark,
body.dark .text,
body.dark p,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark a,
body.dark li,
body.dark label,
body.dark .navbar-brand-text {
  color: #f0f0f0 !important;
}

body.dark .btn-primary {
  background-color: #007acc;
  border-color: #007acc;
}

body.dark .btn-primary:hover {
  background-color: transparent;
  color: #f0f0f0;
  border-color: #888;
}

.dark-toggle-btn {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
  margin-left: 1rem;
}

body.dark .dark-toggle-btn {
  color: #fff;
}

/* Existing and original CSS should follow this declaration */