@import 'base.css';
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

:root, [data-bs-theme="light"] {
  --font-normal: 'Gabarito';

  --text-50: #f5ebf9;
  --text-100: #ebd8f3;
  --text-200: #d8b0e8;
  --text-300: #c489dc;
  --text-400: #b162d0;
  --text-500: #9d3bc4;
  --text-600: #7e2f9d;
  --text-700: #5e2376;
  --text-800: #3f174f;
  --text-900: #1f0c27;
  --text-950: #100614;

  --background-50: #f2f2f3;
  --background-100: #e4e6e7;
  --background-200: #c9cdcf;
  --background-300: #afb4b6;
  --background-400: #949b9e;
  --background-500: #798286;
  --background-600: #61686b;
  --background-700: #494e50;
  --background-800: #303436;
  --background-900: #181a1b;
  --background-950: #0c0d0d;

  --primary-50: #eaf5fb;
  --primary-100: #d4ecf7;
  --primary-200: #aad9ee;
  --primary-300: #7fc5e6;
  --primary-400: #55b2dd;
  --primary-500: #2a9fd5;
  --primary-600: #227faa;
  --primary-700: #195f80;
  --primary-800: #114055;
  --primary-900: #08202b;
  --primary-950: #041015;

  --secondary-50: #fbe5ff;
  --secondary-100: #f6ccff;
  --secondary-200: #ee99ff;
  --secondary-300: #e566ff;
  --secondary-400: #dd33ff;
  --secondary-500: #d400ff;
  --secondary-600: #aa00cc;
  --secondary-700: #7f0099;
  --secondary-800: #550066;
  --secondary-900: #2a0033;
  --secondary-950: #15001a;

  --accent-50: #e5f7ff;
  --accent-100: #ccefff;
  --accent-200: #99dfff;
  --accent-300: #66cfff;
  --accent-400: #33beff;
  --accent-500: #00aeff;
  --accent-600: #008bcc;
  --accent-700: #006999;
  --accent-800: #004666;
  --accent-900: #002333;
  --accent-950: #00111a;

}
[data-bs-theme="dark"] {
  --text-50: #100614;
  --text-100: #1f0c27;
  --text-200: #3f174f;
  --text-300: #5e2376;
  --text-400: #7e2f9d;
  --text-500: #9d3bc4;
  --text-600: #b162d0;
  --text-700: #c489dc;
  --text-800: #d8b0e8;
  --text-900: #ebd8f3;
  --text-950: #f5ebf9;

  --background-50: #0c0d0d;
  --background-100: #181a1b;
  --background-200: #303436;
  --background-300: #494e50;
  --background-400: #61686b;
  --background-500: #798286;
  --background-600: #949b9e;
  --background-700: #afb4b6;
  --background-800: #c9cdcf;
  --background-900: #e4e6e7;
  --background-950: #f2f2f3;

  --primary-50: #041015;
  --primary-100: #08202b;
  --primary-200: #114055;
  --primary-300: #195f80;
  --primary-400: #227faa;
  --primary-500: #2a9fd5;
  --primary-600: #55b2dd;
  --primary-700: #7fc5e6;
  --primary-800: #aad9ee;
  --primary-900: #d4ecf7;
  --primary-950: #eaf5fb;

  --secondary-50: #15001a;
  --secondary-100: #2a0033;
  --secondary-200: #550066;
  --secondary-300: #7f0099;
  --secondary-400: #aa00cc;
  --secondary-500: #d400ff;
  --secondary-600: #dd33ff;
  --secondary-700: #e566ff;
  --secondary-800: #ee99ff;
  --secondary-900: #f6ccff;
  --secondary-950: #fbe5ff;

  --accent-50: #00111a;
  --accent-100: #002333;
  --accent-200: #004666;
  --accent-300: #006999;
  --accent-400: #008bcc;
  --accent-500: #00aeff;
  --accent-600: #33beff;
  --accent-700: #66cfff;
  --accent-800: #99dfff;
  --accent-900: #ccefff;
  --accent-950: #e5f7ff;

}

.bg-secondary {
  background-color: var(--background-200) !important;
}

.breadcrumb {
  background-color: var(--background-200) !important;
}

span.h5 {
  color: var(--background-950) !important;
}

.text-info, h4, .h4 {
  color: var(--secondary-400) !important;
}

.fas {
  color: var(--background-800) !important;
}

.text-success {
  color: var(--bs-green) !important;
}

.text-danger {
  color: var(--bs-red) !important;
}

.form-check-input {
  background-color: var(--background-400) !important;
  color: var(--primary-500) !important;
}

.btn-outline-light,
.btn.btn-outline-light.bg-secondary {
  border-color: var(--primary-100) !important;
}

.btn-outline-light,
.btn.btn-outline-light.bg-secondary > span {
  color: var(--text-500) !important;
}

.card, .card-header {
  background-color: var(--background-300) !important;
  color: var(--text-950) !important;
}

.form-select, .form-control {
  background-color: var(--background-400) !important;
  color: var(--primary-950) !important;
}

.form-check-input {
  background-color: var(--background-400) !important;
  color: var(--primary-500) !important;
}

#command-container, #command-parameters {
  background-color: var(--background-300) !important;
  color: var(--primary-950) !important;
}

td.bg-secondary {
  background-color: var(--background-300) !important;
}

.text-secondary {
  color: var(--secondary-800) !important;
}

.dt-button {
  color: var(--text-950) !important;
  background-color: var(--background-300) !important;
  border-color: var(--background-400) !important;
}

.modal-title, .modal-body {
  color: var(--background-950) !important;
}