:root {
    --color-background: 232 232 232;
    --color-primary: 255 74 99;
    --color-secondary: 190 76 254;
    --color-accent-primary: 222 165 177;
    --color-accent-secondary: 222 165 254;
    --color-accent-blue-primary: 8 208 255;
    --color-accent-blue-secondary: 131 231 255;
    --color-dark: 58 58 58;
}

/* Base styles */
body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-dark));
}

/* Navigation */
nav.bg-white {
    background-color: white !important;
}

nav a.text-gray-700:hover {
    color: rgb(var(--color-primary)) !important;
}

/* Mobile menu */
.mobile-menu a:hover {
    background-color: rgb(var(--color-background)) !important;
    color: rgb(var(--color-primary)) !important;
}

/* Hero sections */
.hero-section,
section.bg-gray-900,
section.bg-gradient-to-r {
    background: linear-gradient(
        135deg,
        rgb(var(--color-primary)),
        rgb(var(--color-secondary))
    ) !important;
}

/* Buttons */
button,
.btn {
    background-color: rgb(var(--color-primary)) !important;
    transition: all 0.3s ease !important;
}

button:hover,
.btn:hover {
    background-color: rgb(var(--color-secondary)) !important;
    transform: scale(1.05);
}

/* Cards and hover effects */
.technology-card:hover,
.team-card:hover,
.case-study-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
    border-color: rgb(var(--color-primary)) !important;
}

.team-card {
    border-top: 4px solid transparent !important;
}

.team-card:hover {
    border-top: 4px solid rgb(var(--color-primary)) !important;
}

/* Footer */
footer.bg-gray-900 {
    background-color: rgb(var(--color-dark)) !important;
}

footer a:hover {
    color: rgb(var(--color-accent-blue-secondary)) !important;
}

/* Text highlights */
.gradient-text {
    background: linear-gradient(
        45deg,
        rgb(var(--color-primary)),
        rgb(var(--color-secondary))
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Service cards and tech cards */
.service-card .absolute.bottom-0,
.technology-card .absolute.bottom-0 {
    background: rgba(var(--color-dark), 0.7) !important;
}

.service-card:hover .service-details,
.technology-card:hover .technology-details {
    opacity: 1;
    transform: translateY(0);
}

/* Contact form */
input:focus,
textarea:focus {
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2) !important;
}

/* Custom highlight colors */
.bg-blue-50 {
    background-color: rgba(var(--color-accent-blue-secondary), 0.2) !important;
}

.bg-purple-50,
.bg-pink-50,
.bg-indigo-50,
.bg-green-50,
.bg-rose-50 {
    background-color: rgba(var(--color-accent-secondary), 0.2) !important;
}

.text-blue-500,
.text-blue-600,
.text-blue-800 {
    color: rgb(var(--color-accent-blue-primary)) !important;
}

.text-purple-500,
.text-purple-800,
.text-pink-500,
.text-indigo-500,
.text-green-500,
.text-rose-500 {
    color: rgb(var(--color-secondary)) !important;
}

.border-blue-500,
.border-purple-500,
.border-pink-500 {
    border-color: rgb(var(--color-primary)) !important;
}

/* Icon colors */
.fab:hover,
.fas:hover {
    color: rgb(var(--color-primary)) !important;
}

/* Call to action sections */
.bg-gray-50 {
    background-color: white !important;
}

.bg-white {
    background-color: white !important;
}

/* Additional section colors */
section.relative .absolute.inset-0 div.bg-black {
    background-color: rgba(var(--color-dark), 0.6) !important;
}

/* Custom dividers */
.absolute.w-24.h-1.bg-blue-500,
.absolute.w-24.h-1.bg-purple-500,
.absolute.w-24.h-1.bg-pink-500 {
    background: linear-gradient(
        to right,
        rgb(var(--color-primary)),
        rgb(var(--color-secondary))
    ) !important;
}