[data-bs-theme="dark"] {
  --color-primary-1: hsl(231, 35%, 8%);
  --color-primary-1-rgb: rgb(13, 15, 28);
  --color-primary-1-hex: #0d0f1c;

  --color-primary-2: hsl(231, 35%, 12%);
  --color-primary-2-rgb: rgb(20, 24, 41);
  --color-primary-2-hex: #141829;

  --color-primary-3: hsl(231, 35%, 25%);
  --color-primary-3-rgb: rgb(41, 48, 82);
  --color-primary-3-hex: #293052;

  --color-primary-accent: hsl(232, 100%, 86%);
  --color-primary-accent-rgb: rgb(184, 194, 255);
  --color-primary-accent-hex: #b8c2ff;

  --color-primary-accent-tint: hsl(232, 100%, 92%);

  --bs-body-bg: var(--color-primary-1);

  /* AI voorstel */
  --bs-body-bg-rgb: 13, 15, 28;
  --bs-tertiary-bg: var(--color-primary-2);
  --bs-secondary-bg: var(--color-primary-3);

  /* Randen en Lijnen */
  --bs-border-color: var(--color-primary-3);
  --bs-border-color-translucent: rgba(214, 222, 255, 0.1);

  /* Primary Kleur (Jouw accent kleur) */
  --bs-primary: var(--color-primary-accent);
  --bs-primary-border-subtle: var(--color-primary-3);
  --bs-primary-bg-subtle: var(--color-primary-2);

  /* Functionele kleuren (aangepast voor Dark Theme) */
  /*
  --bs-success: #74d99f;
  --bs-success-border-subtle: rgba(116, 217, 159, 0.3);
  --bs-success-bg-subtle: rgba(116, 217, 159, 0.1);

  --bs-danger: #ff8b8b;
  --bs-danger-border-subtle: rgba(255, 139, 139, 0.3);
  --bs-danger-bg-subtle: rgba(255, 139, 139, 0.1);

  --bs-warning: #ffd074;
  --bs-warning-border-subtle: rgba(255, 208, 116, 0.3);
  --bs-warning-bg-subtle: rgba(255, 208, 116, 0.1);
  */
}

[data-bs-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23DEE2E6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .theme-text-white {
  color: var(--bs-text-body);
}

[data-bs-theme="dark"] .theme-bg-white {
  background-color: var(--bs-text-body);
}

[data-bs-theme="dark"] .form-check-input {
  border-color: var(--color-primary-3);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b8c2ff' /%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: var(--color-primary-3);
}