:root,
[data-bs-theme="light"] {
  --ar-gray-100: #f7f8fc;
  --ar-gray-200: #e0e4f6;
  --ar-gray-300: #d5dae8;
  --ar-gray-400: #bfc6d8;
  --ar-gray-500: #96a0b8;
  --ar-gray-600: #6f7a93;
  --ar-gray-700: #4a556d;
  --ar-gray-800: #283346;
  --ar-gray-900: #151c28;

  --ar-primary: #ff4b1a;
  --ar-primary-rgb: 255, 75, 26;

  --ar-secondary: #f7f8fc;
  --ar-secondary-rgb: 247, 248, 252;

  --ar-dark: #151c28;
  --ar-danger: #bc0c06;
  --ar-danger-rgb: 188, 12, 6;
}

[data-bs-theme="dark"] {
  --ar-gray-100: #1e283a;
  --ar-gray-200: #1a2332;
  --ar-gray-300: #18202e;
  --ar-gray-400: #151c28;
  --ar-gray-500: #101723;
  --ar-gray-600: #0c111b;
  --ar-gray-700: #090d14;
  --ar-gray-800: #06080d;
  --ar-gray-900: #030407;

  --ar-primary: #ff5c33;
  --ar-primary-rgb: 255, 92, 51;

  --ar-secondary: #1e283a;
  --ar-secondary-rgb: 30, 40, 58;

  --ar-dark: #030407;
  --ar-danger: #d12a1f;
  --ar-danger-rgb: 209, 42, 31;
}

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

.btn-primary {
  border-color: var(--ar-primary);
  background-color: var(--ar-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #d93200;
  background-color: #d93200;
}

.btn-outline-primary {
  color: var(--ar-primary);
  border-color: var(--ar-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--ar-primary);
  border-color: var(--ar-primary);
}