@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --color-primary-50: #f0f9ff;
        --color-primary-100: #e0f2fe;
        --color-primary-200: #bae6fd;
        --color-primary-300: #7dd3fc;
        --color-primary-400: #38bdf8;
        --color-primary-500: #0ea5e9;
        --color-primary-600: #0284c7;
        --color-primary-700: #0369a1;
        --color-primary-800: #075985;
        --color-primary-900: #0c4a6e;
        
        --color-teal-50: #f0fdfa;
        --color-teal-100: #ccfbf1;
        --color-teal-200: #99f6e4;
        --color-teal-300: #5eead4;
        --color-teal-400: #2dd4bf;
        --color-teal-500: #14b8a6;
        --color-teal-600: #0d9488;
        --color-teal-700: #0f766e;
        --color-teal-800: #115e59;
        --color-teal-900: #134e4a;
        
        /* Other color variables... */
    }
}

/* Rest of your existing CSS... */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #0ea5e9, #14b8a6, #facc15, #fb923c);
}

@keyframes float1 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) translateX(10px) rotate(5deg);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50% {
        transform: translateY(15px) translateX(-15px) rotate(-3deg);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) translateX(5px) rotate(2deg);
    }
}

@keyframes float4 {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    50% {
        transform: translateY(10px) translateX(-10px) rotate(-5deg);
    }
}

.animate-float1 {
    animation: float1 8s ease-in-out infinite;
}

.animate-float2 {
    animation: float2 10s ease-in-out infinite;
}

.animate-float3 {
    animation: float3 12s ease-in-out infinite;
}

.animate-float4 {
    animation: float4 9s ease-in-out infinite;
}

/* Modal styles */
#comingSoonModal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

#comingSoonModal > div {
    background-color: white;
    border-radius: 0.75rem;
    max-width: 28rem;
    width: 100%;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

#comingSoonModal > div.scale-100 {
    transform: scale(1);
    opacity: 1;
}