/*
 * brand theme for Basalt
 */
:root,
html[data-brand-theme="basalt"] {
  --brand-50: #eff7f9;
  --brand-100: #d6eaef;
  --brand-200: #b0d6de;
  --brand-300: #7db8c5;
  --brand-400: #4d98ab;
  --brand-500: #35798d;
  --brand-600: #2b6474;
  --brand-700: #23515f;
  --brand-800: #1f434f;
  --brand-900: #19343e;
  --brand-300-rgb: 125 184 197;
  --brand-500-rgb: 53 121 141;
  --brand-800-rgb: 31 67 79;
}

.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800 {
  color: var(--brand-600) !important;
}

.dark .dark\:text-blue-400,
.dark .dark\:text-blue-500 {
  color: #8ac8d4 !important;
}

.bg-blue-50 {
  background-color: var(--brand-50) !important;
}

.bg-blue-100 {
  background-color: var(--brand-100) !important;
}

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

.bg-blue-300 {
  background-color: var(--brand-300) !important;
}

.bg-blue-600 {
  background-color: var(--brand-600) !important;
}

.border-blue-600 {
  border-color: var(--brand-600) !important;
}

.from-blue-100 {
  --tw-gradient-from: var(--brand-100) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(215 240 232 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-100 {
  --tw-gradient-to: var(--brand-100) var(--tw-gradient-to-position) !important;
}

.dark .dark\:bg-gray-600 {
  background-color: rgb(75 85 99 / 1) !important;
}

.dark .dark\:bg-gray-700 {
  background-color: rgb(55 65 81 / 1) !important;
}

.dark .dark\:bg-gray-800 {
  background-color: rgb(31 41 55 / 1) !important;
}

.dark .dark\:bg-gray-900 {
  background-color: rgb(17 24 39 / 1) !important;
}

.dark .dark\:from-gray-800 {
  --tw-gradient-from: rgb(31 41 55 / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.dark .dark\:from-gray-900 {
  --tw-gradient-from: rgb(17 24 39 / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.dark .dark\:to-gray-800 {
  --tw-gradient-to: rgb(31 41 55 / 1) var(--tw-gradient-to-position) !important;
}

.dark .dark\:to-gray-900 {
  --tw-gradient-to: rgb(17 24 39 / 1) var(--tw-gradient-to-position) !important;
}

.hover\:text-blue-600:hover {
  color: var(--brand-700) !important;
}

.hover\:bg-blue-100:hover {
  background-color: var(--brand-100) !important;
}

.hover\:bg-blue-200:hover {
  background-color: var(--brand-300) !important;
}

.hover\:bg-blue-300:hover {
  background-color: var(--brand-400) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover {
  background-color: var(--brand-700) !important;
}

.focus\:ring-blue-300:focus,
.focus\:ring-blue-500:focus {
  --tw-ring-color: rgb(
    var(--brand-300-rgb) / var(--tw-ring-opacity, 1)
  ) !important;
}

.focus\:border-blue-500:focus {
  border-color: rgb(var(--brand-500-rgb)) !important;
}

.dark .dark\:bg-blue-600 {
  background-color: var(--brand-600) !important;
}

.dark .dark\:hover\:bg-blue-700:hover {
  background-color: var(--brand-700) !important;
}

.dark .dark\:focus\:ring-blue-500:focus,
.dark .dark\:focus\:ring-blue-800:focus {
  --tw-ring-color: rgb(
    var(--brand-800-rgb) / var(--tw-ring-opacity, 1)
  ) !important;
}

.dark .dark\:focus\:border-blue-500:focus {
  border-color: rgb(var(--brand-500-rgb)) !important;
}