/* base/darkmode.css */
body.dark-mode {
  --text: #e0e0e0;
  --text-muted: #a0a0a0;


  --background: rgba(23, 28, 74, 1);
  --background-dark1: color-mix(in srgb, var(--background) 90%, black);
  --background-dark2: color-mix(in srgb, var(--background) 80%, black);
  --background-dark3: color-mix(in srgb, var(--background) 70%, black);
  --background-dark4: color-mix(in srgb, var(--background) 60%, black);
  --background-dark5: color-mix(in srgb, var(--background) 50%, black);
  --background-dark6: color-mix(in srgb, var(--background) 40%, black);
  --background-dark7: color-mix(in srgb, var(--background) 30%, black);
  --background-dark8: color-mix(in srgb, var(--background) 20%, black);
  --background-dark9: color-mix(in srgb, var(--background) 10%, black);

  --background-secondary1: color-mix(in srgb, var(--background) 90%, var(--secondary));
  --background-secondary2: color-mix(in srgb, var(--background) 80%, var(--secondary));
  --background-secondary3: color-mix(in srgb, var(--background) 70%, var(--secondary));

  --background-light1: color-mix(in srgb, var(--background) 90%, white);
  --background-light2: color-mix(in srgb, var(--background) 80%, white);
  --background-light3: color-mix(in srgb, var(--background) 70%, white);


  --primary: rgba(214, 248, 123, 1);


  --secondary: rgb(32, 9, 165);
  --secondary-dark1: color-mix(in srgb, var(--secondary) 90%, black);
  --secondary-dark2: color-mix(in srgb, var(--secondary) 80%, black);
  --secondary-dark3: color-mix(in srgb, var(--secondary) 70%, black);
  --secondary-dark4: color-mix(in srgb, var(--secondary) 60%, black);
  --secondary-dark5: color-mix(in srgb, var(--secondary) 50%, black);
  --secondary-dark6: color-mix(in srgb, var(--secondary) 40%, black);
  --secondary-dark7: color-mix(in srgb, var(--secondary) 30%, black);
  --secondary-dark8: color-mix(in srgb, var(--secondary) 20%, black);
  --secondary-dark9: color-mix(in srgb, var(--secondary) 10%, black);

  --secondary-light1: color-mix(in srgb, var(--secondary) 90%, white);
  --secondary-light2: color-mix(in srgb, var(--secondary) 80%, white);
  --secondary-light3: color-mix(in srgb, var(--secondary) 70%, white);


  --accent: rgba(235, 30, 54, 1);

  
  --bnlx: rgba(243, 156, 18, 1);
  --border: rgba(255, 255, 255, 0.2);
  
  /* === Navbar & footer styling === */
  --navbar-shadow: var(--primary);
  --transition-normal: 0.3s ease;

  --logo-filter: invert(1) brightness(1.2) contrast(1.1);
}

body.dark-mode .btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--border);
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--border);
  color: var(--btn-text);
}

body.dark-mode .btn-secondary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--border);
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--btn-hover-bg);
  color: var(--btn-text);
}

body.dark-mode .form-inline {
  color: var(--secondary);
}

body.dark-mode .form-control {
  background-color: var(--form-bg);
  color: var(--form-text);
  border-color: var(--form-border);
}

body.dark-mode .score-logo {
  filter: var(--logo-filter);
}