:root {
  --qz-navy: #00144b;
  --qz-navy-deep: #000d35;
  --qz-navy-panel: #071c58;
  --qz-purple: #531cfc;
  --qz-purple-deep: #3b1fca;
  --qz-gold: #fcb106;
  --qz-gold-bright: #fec306;
  color-scheme: dark;
}

html,
body {
  background-color: var(--qz-navy) !important;
}

body {
  background-image:
    radial-gradient(circle at 50% 0, rgba(83, 28, 252, 0.34), transparent 58%),
    radial-gradient(circle at 0 100%, rgba(252, 177, 6, 0.18), transparent 48%),
    linear-gradient(145deg, var(--qz-navy-deep), var(--qz-navy)) !important;
}

.bg-background {
  background-color: var(--qz-navy) !important;
}

.glass-panel {
  background-color: rgba(7, 28, 88, 0.86) !important;
  border-color: rgba(254, 195, 6, 0.22) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 8, 40, 0.72) !important;
}

.text-primary {
  color: var(--qz-purple) !important;
}

.bg-primary {
  background-color: var(--qz-purple) !important;
}

.text-primary-foreground {
  color: #fff !important;
}

.text-accent {
  color: var(--qz-gold) !important;
}

.bg-accent {
  background-color: var(--qz-gold) !important;
}

.text-accent-foreground {
  color: var(--qz-navy-deep) !important;
}

.border-primary {
  border-color: var(--qz-purple) !important;
}

.border-primary\/30 {
  border-color: rgb(83 28 252 / 0.3) !important;
}

.border-primary\/50 {
  border-color: rgb(83 28 252 / 0.5) !important;
}

.border-accent\/30 {
  border-color: rgb(252 177 6 / 0.3) !important;
}

.ring-primary\/60 {
  --tw-ring-color: rgb(83 28 252 / 0.6) !important;
}

.bg-primary\/10 {
  background-color: rgb(83 28 252 / 0.1) !important;
}

.bg-primary\/20 {
  background-color: rgb(83 28 252 / 0.2) !important;
}

.bg-accent\/10 {
  background-color: rgb(252 177 6 / 0.1) !important;
}

.from-primary {
  --tw-gradient-from: var(--qz-purple) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
}

.from-primary\/15 {
  --tw-gradient-from: rgb(83 28 252 / 0.15) !important;
}

.from-primary\/20 {
  --tw-gradient-from: rgb(83 28 252 / 0.2) !important;
}

.from-primary\/25 {
  --tw-gradient-from: rgb(83 28 252 / 0.25) !important;
}

.to-primary {
  --tw-gradient-to: var(--qz-purple) !important;
}

.to-accent {
  --tw-gradient-to: var(--qz-gold) !important;
}

.to-accent\/20 {
  --tw-gradient-to: rgb(252 177 6 / 0.2) !important;
}

.to-accent\/25 {
  --tw-gradient-to: rgb(252 177 6 / 0.25) !important;
}

.via-accent {
  --tw-gradient-via: var(--qz-gold) !important;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
}

/* Replace the remaining legacy neon palette with the logo's purple, gold, and navy. */
.text-cyan-400,
.text-blue-300,
.text-blue-400 {
  color: var(--qz-gold) !important;
}

.text-fuchsia-500,
.text-pink-500,
.text-purple-400 {
  color: #8b63ff !important;
}

.bg-cyan-400,
.bg-blue-500 {
  background-color: var(--qz-gold) !important;
}

.bg-pink-500,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700 {
  background-color: var(--qz-purple) !important;
}

.from-cyan-400,
.from-purple-600 {
  --tw-gradient-from: var(--qz-purple) !important;
}

.to-fuchsia-500,
.to-cyan-500,
.to-blue-600 {
  --tw-gradient-to: var(--qz-gold) !important;
}

.via-purple-900 {
  --tw-gradient-via: var(--qz-navy) !important;
}

.drop-shadow-\[0_0_15px_rgba\(236\,72\,153\,0\.5\)\] {
  --tw-drop-shadow-color: rgb(83 28 252 / 0.58) !important;
}