@theme {
  --color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 47));
  --color-primary-100: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44));
  --color-primary-200: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 36));
  --color-primary-300: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27));
  --color-primary-400: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16));
  --color-primary-500: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));
  --color-primary-600: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45));
  --color-primary-700: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 39));
  --color-primary-800: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32));
  --color-primary-900: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 24));
  --color-dark: #161c27;
}

/* Override the Hextra theme's dark color variable */
:root {
  --hx-color-dark: #161c27 !important;
}

/* Also override for dark mode specifically */
.dark, html.dark {
  --hx-color-dark: #161c27 !important;
}

/* Direct override for dark background color - ONLY when dark mode is active */
.dark, html.dark {
  background-color: #161c27 !important;
}

/* Override specific elements that use hx:dark:bg-dark - ONLY in dark mode */
html.dark .hx\:dark\:bg-dark,
.dark .hx\:dark\:bg-dark {
  background-color: #161c27 !important;
}

/* More specific override for elements with hx:dark:bg-dark class */
html.dark [class*="hx:dark:bg-dark"],
.dark [class*="hx:dark:bg-dark"] {
  background-color: #161c27 !important;
}

/* Override the dark background color for all elements that should use it */
html.dark .hextra-nav-container-blur,
.dark .hextra-nav-container-blur,
html.dark .hx\:dark\:bg-dark,
.dark .hx\:dark\:bg-dark {
  background-color: #161c27 !important;
}

/* Even more specific overrides to ensure the color is applied */
html.dark body,
.dark body,
html.dark .hextra-body,
.dark .hextra-body,
html.dark .hextra-main,
.dark .hextra-main {
  background-color: #161c27 !important;
}

/* Override any potential CSS variable usage */
html.dark {
  --hx-color-dark: #161c27 !important;
  --color-dark: #161c27 !important;
}

.dark {
  --hx-color-dark: #161c27 !important;
  --color-dark: #161c27 !important;
}

/* Directly override the hx:dark:bg-dark utility class with higher specificity */
html.dark .hx\:dark\:bg-dark:where(.dark,.dark *),
.dark .hx\:dark\:bg-dark:where(.dark,.dark *),
html.dark .hx\:dark\:bg-dark,
.dark .hx\:dark\:bg-dark {
  background-color: #161c27 !important;
}

/* Override the shadow color that uses #111 */
html.dark .hx\:dark\:shadow-\[0_-12px_16px_\#111\],
.dark .hx\:dark\:shadow-\[0_-12px_16px_\#111\] {
  --tw-shadow-color: #161c27 !important;
  box-shadow: 0 -12px 16px var(--tw-shadow-color, #161c27) !important;
}

/* Ultimate fallback - directly target the body with highest specificity */
html.dark body.dark,
body.dark,
html.dark body,
.dark body {
  background-color: #161c27 !important;
}

/* Target specific elements that might have hardcoded colors */
html.dark [style*="#111"],
.dark [style*="#111"] {
  background-color: #161c27 !important;
  color: #161c27 !important;
}

/* Override any color-mix functions that might be using --hx-color-dark */
@supports (color: color-mix(in oklab, red, red)) {
  html.dark,
  .dark {
    --hx-color-dark: #161c27 !important;
    --color-dark: #161c27 !important;
  }
  
  /* Directly override color-mix results */
  html.dark body,
  .dark body {
    background-color: color-mix(in oklab, #161c27, transparent) !important;
  }
}

/* Fallback for browsers that don't support color-mix */
@supports not (color: color-mix(in oklab, red, red)) {
  html.dark,
  .dark {
    background-color: #161c27 !important;
  }
}

/* Override footer background color for dark theme */
.dark footer,
html.dark footer,
.dark .hextra-footer,
html.dark .hextra-footer {
  background-color: rgba(0, 0, 0, 0.2) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* Ensure footer content is still readable on transparent background */
.dark footer *,
html.dark footer *,
.dark .hextra-footer *,
html.dark .hextra-footer * {
  color: var(--hx-color-gray-100) !important;
}

.dark {
  --primary-hue: 204deg;
  --primary-saturation: 100%;
  --primary-lightness: 50%;
}