/* ============================================
   COLOR VARIABLES
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #2F3E46;
    --color-bg: #1a1a1a;
    --color-text: #D6CFC2;
    --form-label-color: #2f3e46;
    --form-input-border-color: #2f3e46;
    --placeholder-color: #91999d;
    --color-muted: #798287;
    --color-white: #181a1b;
    --border-color: #52796F;

    .custom-btn.btn-success {
      border: 1px solid var(--color-primary);
      background: var(--color-bg);
      color: var(--color-primary);
    }
    .custom-btn.btn-success:hover {
      border: 1px solid var(--color-primary);
      background: var(--color-primary);
      color: var(--color-text);
    }
    .btn-outline-success.custom-btn:hover {
      background: var(--color-primary);
      color: var(--color-text);
    }
  }
}

/* Manual light mode override */
.light-mode {
  --color-primary: #2F3E46;
  --color-bg: #fff;
  --color-text: #D6CFC2;
  --form-label-color: #2f3e46;
  --form-input-border-color: #2f3e46;
  --placeholder-color: #91999d;
  --color-muted: #888;
  --color-white: #fff;
  --border-color: #52796F;
}

/* Manual dark mode override */
.dark-mode {
  --color-primary: #191919;
  --color-bg: #333333;
  --color-text: #D6CFC2;
  --form-label-color: #d6cfc2;
  --form-input-border-color: #d6cfc2;
  --placeholder-color: #9d9990;
  --color-muted: #d6cfc2;
  --color-white: #181a1b;
  --border-color: #52796F;
}
.dark-mode .custom-btn.btn-success {
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-primary);
}
.dark-mode .custom-btn.btn-success:hover {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text);
}
.dark-mode .btn-outline-success.custom-btn:hover {
  background: var(--color-primary);
  color: var(--color-text);
}


/* Dark mode toggle button */
.theme-toggle-btn {
  background: none;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
}

.theme-toggle-btn:hover {
  background: var(--color-primary);
  color: var(--color-bg);
}
.theme-toggle-btn:hover i {
  color: #fff !important;
}