/* Dynamic Theme Colors - Generated from Database Settings */
:root {
/* Primary Color */
--color-primary:
#00cef4 !important;
--color-primary-rgb:
0, 206, 244 !important;
}

[data-theme="dark"] {
--color-bg-primary:
#0a0e1a !important;
--color-text-primary:
#ffffff !important;
}

[data-theme="light"] {
--color-bg-primary:
#ffffff !important;
--color-text-primary:
#1a1a1a !important;
}

/* Override text-gradient with primary color */
.text-gradient,
h1 .text-gradient,
h2 .text-gradient,
h3 .text-gradient,
.section-title .text-gradient,
h1 span.text-gradient,
h2 span.text-gradient,
h3 span.text-gradient {
background: linear-gradient(135deg,
#00cef4, rgba(
0, 206, 244, 0.6)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}

/* Apply primary color to logo and other highlighted elements */
.logo-bite,
.highlight,
.accent-text,
.primary-text {
color:
#00cef4 !important;
}

/* Apply primary color to icon BACKGROUNDS */
.card .card-icon,
.feature .feature-icon,
.service .service-icon,
.stat .stat-icon,
div.card-icon,
div.feature-icon,
div.service-icon,
div.stat-icon {
background-color: rgba(
0, 206, 244, 0.15) !important;
background: rgba(
0, 206, 244, 0.15) !important;
}

/* Hover states for icon backgrounds */
.card:hover .card-icon,
.feature:hover .feature-icon,
.service:hover .service-icon {
background-color: rgba(
0, 206, 244, 0.25) !important;
background: rgba(
0, 206, 244, 0.25) !important;
}

/* Apply primary color to button backgrounds */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
background-color:
#00cef4 !important;
background:
#00cef4 !important;
border-color:
#00cef4 !important;
}

/* Button hover states */
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
background-color: rgba(
0, 206, 244, 0.8) !important;
background: rgba(
0, 206, 244, 0.8) !important;
filter: brightness(0.9);
}

/* Navigation menu hover border - override gradient with solid color */
.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after,
.nav-link:hover::after,
.nav-link.active::after {
background:
#00cef4 !important;
background-color:
#00cef4 !important;
background-image: none !important;
}

/* Navigation menu text color on hover */
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active,
.nav-link:hover,
.nav-link.active {
color:
#00cef4 !important;
}