/* Legend Sovereign palette override. Load after the main bundle CSS. */
:root {
  --legend-navy: #0F1E38;
  --legend-deep: #0A1526;
  --legend-teal: #159A9C;
  --legend-teal-dark: #0E7D7F;
  --legend-teal-tint: #7FC9CA;
  --legend-gold: #B4893C;
  --legend-paper: #F5F7F9;
  --legend-slate: #5B6675;
}

html, body, #root {
  background-color: var(--legend-deep) !important;
  color: var(--legend-paper);
}

body {
  background-color: var(--legend-deep) !important;
}

.bg-black,
.bg-\[\#0B1526\],
.bg-\[\#0c0f12\] {
  background-color: var(--legend-deep) !important;
}

.bg-gray-950,
.bg-gray-900 {
  background-color: var(--legend-navy) !important;
}

/* Gold is accent only. Do not keep it as a text color. */
.text-\[\#c4a35a\] {
  color: var(--legend-teal-tint) !important;
}

.bg-\[\#c4a35a\],
.hover\:bg-\[\#c4a35a\]:hover {
  background-color: var(--legend-teal) !important;
  color: #ffffff !important;
}

.bg-\[\#c4a35a\]\/10 { background-color: rgba(21, 154, 156, 0.10) !important; }
.bg-\[\#c4a35a\]\/20 { background-color: rgba(21, 154, 156, 0.20) !important; }

.border-\[\#c4a35a\],
.border-\[\#c4a35a\]\/40,
.border-\[\#c4a35a\]\/60,
.hover\:border-\[\#c4a35a\]\/50:hover,
.focus\:border-\[\#c4a35a\]:focus {
  border-color: rgba(21, 154, 156, 0.45) !important;
}

.focus\:ring-\[\#c4a35a\]:focus {
  --tw-ring-color: #159A9C !important;
}

.bg-teal-500,
.bg-teal-400,
.bg-teal-600 {
  background-color: var(--legend-teal) !important;
  color: #ffffff !important;
}

.hover\:bg-teal-400:hover,
.hover\:bg-teal-500:hover {
  background-color: var(--legend-teal-dark) !important;
}

.text-teal-300,
.text-teal-200,
.text-teal-400 {
  color: var(--legend-teal-tint) !important;
}

.border-teal-500\/20,
.border-teal-500\/30,
.border-teal-500\/40 {
  border-color: rgba(21, 154, 156, 0.30) !important;
}

header {
  box-shadow: inset 0 -1px 0 var(--legend-gold);
}

::-webkit-scrollbar-thumb {
  background: var(--legend-teal);
}

::-webkit-scrollbar-track {
  background: var(--legend-deep);
}