/* Custom CSS Variables */
:root {
    --color-primary: #00D1C1;
    --color-primary-50: #e0f7f5;
    --color-primary-100: #b3f0e9;
    --color-primary-200: #80e8dd;
    --color-primary-300: #4de0d1;
    --color-primary-400: #26d9c7;
    --color-primary-500: #00D1C1;
    --color-primary-600: #00ccbb;
    --color-primary-700: #00c6b3;
    --color-primary-800: #00c0ab;
    --color-primary-900: #00b59e;
    
    --color-secondary: #007C70;
    --color-secondary-50: #e0f0ef;
    --color-secondary-100: #b3d9d6;
    --color-secondary-200: #80c0bb;
    --color-secondary-300: #4da7a0;
    --color-secondary-400: #26948b;
    --color-secondary-500: #007C70;
    --color-secondary-600: #007468;
    --color-secondary-700: #00695d;
    --color-secondary-800: #005f53;
    --color-secondary-900: #004c41;
    
    --color-dark: #121212;
    --color-darker: #0a0a0a;
    --color-light: #f5f5f5;
}
/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    color-scheme: dark;
}
/* Dark mode base styles */
body {
    background-color: #121212;
    color: var(--color-light);
}

/* Dark mode components */
.bg-white {
    background-color: #121212;
}

.bg-gray-50 {
    background-color: #121212;
}

section {
    background-color: #121212;
}

.bg-primary-50 {
    background-color: rgba(0, 209, 193, 0.1);
}

.bg-secondary-50 {
    background-color: rgba(0, 124, 112, 0.1);
}
.text-gray-500 {
    color: var(--color-gray-400);
}

.text-gray-600 {
    color: var(--color-gray-300);
}

.text-gray-900 {
    color: var(--color-light);
}

.bg-primary-50 {
    background-color: rgba(124, 58, 237, 0.1);
}

.bg-secondary-50 {
    background-color: rgba(16, 185, 129, 0.1);
}
/* Animation for feature cards */
.feature-card {
    transition: all 0.3s ease;
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--color-primary);
}
/* Mobile menu animation */
#mobile-menu {
    transition: all 0.3s ease;
}
/* Accessibility focus styles */
a:focus, button:focus, input:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Form inputs */
input {
    background-color: var(--color-darker);
    color: var(--color-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

input:focus {
    border-color: var(--color-primary);
}

/* Footer */
footer {
    background-color: #121212;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Optimized images */
img {
    max-width: 100%;
    height: auto;
}

/* WebP fallback */
.webp-bg {
    background-image: url('http://static.photos/technology/1200x630/42.webp');
}

.no-webp .webp-bg {
    background-image: url('http://static.photos/technology/1200x630/42.jpg');
}