:root {
    --accent-color: oklch(38.6% 0.063 188.416);
    --accent-hover: oklch(45% 0.08 188.416);
    --accent-light: oklch(50% 0.05 188.416);
    --accent-dark: oklch(30% 0.08 188.416);
    --accent-subtle: oklch(25% 0.04 188.416);
}

.text-accent { color: var(--accent-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }
.bg-acc-color { background-color: oklch(0.332 0.024 183.425 / 0.78) !important;backdrop-filter: blur(30px) }
.hover\:bg-acc-color:hover { background-color: oklch(0.395 0.001 17.215 / 0.44) !important; backdrop-filter: blur(12px)  }
.hover\:text-accent:hover { color: var(--accent-color) !important; }
.hover\:bg-accent:hover { background-color: var(--accent-color) !important; }
.focus\:ring-accent:focus { --tw-ring-color: var(--accent-color) !important; }

body {
    background-color: black;
    max-width: 100vw;
    overflow-x: hidden;
}

.text-accent {
    color: var(--accent-color);
}

.bg-accent {
    background-color: var(--accent-color);
}

.border-accent {
    border-color: var(--accent-color);
}

.hover\:text-accent:hover {
    color: var(--accent-hover);
}

.hover\:bg-accent:hover {
    background-color: var(--accent-hover);
}

/* Search input focus styling */
#search-input:focus {
    --tw-ring-color: var(--accent-color) !important;
    box-shadow: 0 0 0 2px var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Enhanced backdrop blur effect */
.backdrop-blur-enhanced {
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    background-color: oklch(0.413 0.07 190.689);
}

#search-modal .search-backdrop {
    backdrop-filter: blur(100px);
    background: oklch(0.206 0.01 196.37 / 0.75)
}


.desktop-dropdown {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: -50vw !important;
    margin-top: 28px;
}