:root {
  --bg-dark: #0a0a0a;
  --bg-card: #111111;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-rgb: 255, 255, 255;
  --accent: #ff5500;
  --accent-hover: #e04b00;
  --grid-color: rgba(255, 255, 255, 0.05);
  --glass-bg: rgba(17, 17, 17, 0.7);
  --glass-border: rgba(255, 255, 255, 0.1);
  --overlay-95: rgba(0, 0, 0, 0.95);
  --overlay-90: rgba(0, 0, 0, 0.9);
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-50: rgba(0, 0, 0, 0.5);
  --overlay-40: rgba(0, 0, 0, 0.4);
  --overlay-30: rgba(0, 0, 0, 0.3);
  --border-10: rgba(255, 255, 255, 0.1);
  --border-20: rgba(255, 255, 255, 0.2);
  --border-30: rgba(255, 255, 255, 0.3);
}

:root[data-theme="bw"] .bg-black {
  background-color: var(--bg-dark) !important;
}

:root[data-theme="bw"] .bg-black\/95 {
  background-color: var(--overlay-95) !important;
}

:root[data-theme="bw"] .bg-black\/90 {
  background-color: var(--overlay-90) !important;
}

:root[data-theme="bw"] .bg-black\/60 {
  background-color: var(--overlay-60) !important;
}

:root[data-theme="bw"] .bg-black\/50 {
  background-color: var(--overlay-50) !important;
}

:root[data-theme="bw"] .bg-black\/40 {
  background-color: var(--overlay-40) !important;
}

:root[data-theme="bw"] .bg-black\/30 {
  background-color: var(--overlay-30) !important;
}

:root[data-theme="bw"] .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="bw"] .text-white {
  color: var(--text-primary) !important;
}

:root[data-theme="bw"] .text-white\/80 {
  color: rgba(var(--text-rgb), 0.8) !important;
}

:root[data-theme="bw"] .text-white\/70 {
  color: rgba(var(--text-rgb), 0.7) !important;
}

:root[data-theme="bw"] .text-white\/60 {
  color: rgba(var(--text-rgb), 0.6) !important;
}

:root[data-theme="bw"] .text-white\/50 {
  color: rgba(var(--text-rgb), 0.5) !important;
}

:root[data-theme="bw"] .hover\:text-white:hover {
  color: var(--text-primary) !important;
}

:root[data-theme="bw"] .border-white\/10 {
  border-color: var(--border-10) !important;
}

:root[data-theme="bw"] .border-white\/20 {
  border-color: var(--border-20) !important;
}

:root[data-theme="bw"] .border-white\/30 {
  border-color: var(--border-30) !important;
}

:root[data-theme="bw"] .text-gray-300 {
  color: rgba(var(--text-rgb), 0.72) !important;
}

:root[data-theme="bw"] .text-gray-400 {
  color: rgba(var(--text-rgb), 0.68) !important;
}

:root[data-theme="bw"] .text-gray-500 {
  color: rgba(var(--text-rgb), 0.62) !important;
}

:root[data-theme="bw"] .text-gray-600 {
  color: rgba(var(--text-rgb), 0.58) !important;
}

.ys-swatch-black {
  background-color: #ffffff;
  border: 0;
}


/* Mobile Menu Animation */
        #mobile-menu {
            transition: opacity 0.3s ease, transform 0.3s ease;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-10px);
        }
        #mobile-menu.open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }