@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

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

@layer base {
    :root {
        /* Primary Colors - Deep Ocean Authority */
        --color-primary: #1e3a8a; /* blue-900 */
        --color-primary-50: #eff6ff; /* blue-50 */
        --color-primary-100: #dbeafe; /* blue-100 */
        --color-primary-200: #bfdbfe; /* blue-200 */
        --color-primary-300: #93c5fd; /* blue-300 */
        --color-primary-400: #60a5fa; /* blue-400 */
        --color-primary-500: #3b82f6; /* blue-500 */
        --color-primary-600: #2563eb; /* blue-600 */
        --color-primary-700: #1d4ed8; /* blue-700 */
        --color-primary-800: #1e40af; /* blue-800 */
        --color-primary-900: #1e3a8a; /* blue-900 */
        --color-primary-950: #172554; /* blue-950 */
        /* Secondary Colors - Accessible Ocean Clarity */
        --color-secondary: #3b82f6; /* blue-500 */
        --color-secondary-50: #eff6ff; /* blue-50 */
        --color-secondary-100: #dbeafe; /* blue-100 */
        --color-secondary-200: #bfdbfe; /* blue-200 */
        --color-secondary-300: #93c5fd; /* blue-300 */
        --color-secondary-400: #60a5fa; /* blue-400 */
        --color-secondary-500: #3b82f6; /* blue-500 */
        --color-secondary-600: #2563eb; /* blue-600 */
        --color-secondary-700: #1d4ed8; /* blue-700 */
        --color-secondary-800: #1e40af; /* blue-800 */
        /* Accent Colors - Premium Gold */
        --color-accent: #f59e0b; /* amber-500 */
        --color-accent-50: #fffbeb; /* amber-50 */
        --color-accent-100: #fef3c7; /* amber-100 */
        --color-accent-200: #fde68a; /* amber-200 */
        --color-accent-300: #fcd34d; /* amber-300 */
        --color-accent-400: #fbbf24; /* amber-400 */
        --color-accent-500: #f59e0b; /* amber-500 */
        --color-accent-600: #d97706; /* amber-600 */
        --color-accent-700: #b45309; /* amber-700 */
        --color-accent-800: #92400e; /* amber-800 */
        /* Background Colors */
        --color-background: #fefefe; /* neutral-50 */
        --color-surface: #f8fafc; /* slate-50 */
        --color-surface-100: #f1f5f9; /* slate-100 */
        --color-surface-200: #e2e8f0; /* slate-200 */
        /* Text Colors */
        --color-text-primary: #1f2937; /* gray-800 */
        --color-text-secondary: #6b7280; /* gray-500 */
        --color-text-tertiary: #9ca3af; /* gray-400 */
        --color-text-inverse: #ffffff; /* white */
        /* Status Colors */
        --color-success: #059669; /* emerald-600 */
        --color-success-50: #ecfdf5; /* emerald-50 */
        --color-success-100: #d1fae5; /* emerald-100 */
        --color-success-500: #10b981; /* emerald-500 */
        --color-success-600: #059669; /* emerald-600 */
        --color-success-700: #047857; /* emerald-700 */

        --color-warning: #d97706; /* amber-600 */
        --color-warning-50: #fffbeb; /* amber-50 */
        --color-warning-100: #fef3c7; /* amber-100 */
        --color-warning-500: #f59e0b; /* amber-500 */
        --color-warning-600: #d97706; /* amber-600 */
        --color-warning-700: #b45309; /* amber-700 */

        --color-error: #dc2626; /* red-600 */
        --color-error-50: #fef2f2; /* red-50 */
        --color-error-100: #fee2e2; /* red-100 */
        --color-error-500: #ef4444; /* red-500 */
        --color-error-600: #dc2626; /* red-600 */
        --color-error-700: #b91c1c; /* red-700 */
        /* Border Colors */
        --color-border: #e5e7eb; /* gray-200 */
        --color-border-light: #f3f4f6; /* gray-100 */
        --color-border-dark: #d1d5db; /* gray-300 */
        /* Shadow Definitions */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        /* Animation Timing */
        --transition-fast: 150ms;
        --transition-base: 300ms;
        --transition-slow: 600ms;
        --transition-stagger: 150ms;
    }

    body {
        @apply font-body text-text-primary bg-background antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-headline font-semibold;
    }

    h1 {
        @apply text-5xl lg:text-6xl leading-tight;
    }

    h2 {
        @apply text-4xl lg:text-5xl leading-tight;
    }

    h3 {
        @apply text-3xl lg:text-4xl leading-snug;
    }

    h4 {
        @apply text-2xl lg:text-3xl leading-snug;
    }

    h5 {
        @apply text-xl lg:text-2xl leading-normal;
    }

    h6 {
        @apply text-lg lg:text-xl leading-normal;
    }

    p {
        @apply text-base leading-relaxed;
    }

    a {
        @apply transition-colors duration-300;
    }
}

@layer components {
    /* Wave Animation Keyframes */
    @keyframes wave-flow {
        0%, 100% {
            transform: translateX(0) translateY(0);
        }

        50% {
            transform: translateX(-25px) translateY(-10px);
        }
    }

    @keyframes ocean-depth {
        0% {
            transform: translateY(0);
            opacity: 1;
        }

        100% {
            transform: translateY(-20px);
            opacity: 0.8;
        }
    }

    @keyframes fade-in-up {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes stagger-reveal {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes whatsapp-pulse {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
        }
    }

    /* Button Components */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 font-cta font-semibold text-white bg-primary hover:bg-primary-800 rounded-lg shadow-base hover:shadow-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 font-cta font-semibold text-primary bg-white border-2 border-primary hover:bg-primary-50 rounded-lg shadow-sm hover:shadow-base transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }

    .btn-accent {
        @apply inline-flex items-center justify-center px-6 py-3 font-cta font-semibold text-white bg-accent hover:bg-accent-600 rounded-lg shadow-base hover:shadow-md transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2;
    }

    /* WhatsApp Floating Button */
    .whatsapp-float {
        @apply fixed bottom-6 right-6 z-50 w-14 h-14 flex items-center justify-center rounded-full shadow-lg cursor-pointer transition-all duration-300;
        background-color: #25D366;
        animation: whatsapp-pulse 2s infinite;
    }

        .whatsapp-float:hover {
            @apply scale-110 shadow-xl;
            background-color: #20ba5a;
        }

        .whatsapp-float svg {
            @apply w-8 h-8 text-white;
        }

    /* Card Components */
    .card {
        @apply bg-white rounded-xl shadow-base hover:shadow-md transition-shadow duration-300 overflow-hidden;
    }

    .card-elevated {
        @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden;
    }

    /* Form Components */
    .form-input {
        @apply w-full px-4 py-3 text-text-primary bg-white border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-300 placeholder-gray-400;
    }

        .form-input:focus {
            @apply border-primary ring-2 ring-primary-500 ring-opacity-20;
        }

        .form-input:hover {
            @apply border-primary-300;
        }

    .form-textarea {
        @apply form-input resize-none min-h-[120px];
    }

    .form-label {
        @apply block text-sm font-cta font-semibold text-text-primary mb-2;
    }

    .form-error {
        @apply text-sm text-error-600 mt-1;
    }

    .form-success {
        @apply text-sm text-success-600 mt-1;
    }

    /* Contact Form Specific Styles */
    .contact-form {
        @apply space-y-6;
    }

    .contact-form-grid {
        @apply grid grid-cols-1 md:grid-cols-2 gap-6;
    }

    /* Section Components */
    .section-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24;
    }

    .section-header {
        @apply text-center mb-12 lg:mb-16;
    }

    /* Wave Divider */
    .wave-divider {
        @apply relative overflow-hidden;
    }

        .wave-divider::after {
            content: '';
            @apply absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-surface to-transparent;
            animation: wave-flow 8s ease-in-out infinite;
        }

    /* Animation Classes */
    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
    }

    .animate-stagger-1 {
        animation: stagger-reveal 0.6s ease-out 0.15s forwards;
        opacity: 0;
    }

    .animate-stagger-2 {
        animation: stagger-reveal 0.6s ease-out 0.3s forwards;
        opacity: 0;
    }

    .animate-stagger-3 {
        animation: stagger-reveal 0.6s ease-out 0.45s forwards;
        opacity: 0;
    }

    /* Badge Components */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
    }

    .badge-success {
        @apply bg-success-100 text-success-700;
    }

    .badge-warning {
        @apply bg-warning-100 text-warning-700;
    }

    .badge-primary {
        @apply bg-primary-100 text-primary-800;
    }

    /* Certification Badge */
    .certification-badge {
        @apply inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-accent rounded-lg shadow-sm hover:shadow-base transition-all duration-300;
    }

    /* Mobile Menu */
    .mobile-menu {
        @apply lg:hidden mt-4 pb-4 space-y-3 border-t border-gray-200 pt-4;
    }

        .mobile-menu a {
            @apply block py-2 transition-colors duration-200;
        }

    /* Clickable Links - Phone and Email */
    .contact-link {
        @apply transition-colors duration-200 hover:text-accent cursor-pointer;
    }

        .contact-link:hover {
            @apply underline decoration-accent decoration-2 underline-offset-2;
        }

    /* Footer Links */
    footer a {
        @apply transition-colors duration-200;
    }

        footer a:hover {
            @apply text-accent;
        }
}

@layer utilities {
    /* Text Utilities */
    .text-balance {
        text-wrap: balance;
    }

    /* Ocean Gradient */
    .bg-ocean-gradient {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    }

    .bg-ocean-depth {
        background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #1e3a8a 100%);
    }

    /* Gold Accent Gradient */
    .bg-gold-gradient {
        background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    }

    /* Surface Gradient */
    .bg-surface-gradient {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    /* Parallax Effect */
    .parallax-slow {
        transform: translateZ(-1px) scale(2);
    }

    .parallax-medium {
        transform: translateZ(-0.5px) scale(1.5);
    }

    /* Hover Lift Effect */
    .hover-lift {
        @apply transition-transform duration-300;
    }

        .hover-lift:hover {
            @apply -translate-y-2;
        }

    /* Ocean Rhythm Transitions */
    .transition-ocean-fast {
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
    }

    .transition-ocean-base {
        transition-duration: 300ms;
        transition-timing-function: ease-in-out;
    }

    .transition-ocean-slow {
        transition-duration: 600ms;
        transition-timing-function: ease-in-out;
    }

    /* Scroll Reveal */
    .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }

    /* Smooth Scroll */
    .smooth-scroll {
        scroll-behavior: smooth;
    }

    /* Hide Scrollbar */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

    /* Custom Scrollbar for Desktop */
    .scrollbar-custom {
        scrollbar-width: thin;
        scrollbar-color: #1e3a8a #f1f5f9;
    }

        .scrollbar-custom::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .scrollbar-custom::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        .scrollbar-custom::-webkit-scrollbar-thumb {
            background: #1e3a8a;
            border-radius: 4px;
        }

            .scrollbar-custom::-webkit-scrollbar-thumb:hover {
                background: #1e40af;
            }

    /* Focus Visible Utilities */
    .focus-ring {
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }

    /* Responsive Container */
    .container-responsive {
        @apply container mx-auto px-4 sm:px-6 lg:px-8;
    }
}

/* Additional Responsive Utilities */
@media (max-width: 640px) {
    .whatsapp-float {
        @apply bottom-4 right-4 w-12 h-12;
    }

        .whatsapp-float svg {
            @apply w-6 h-6;
        }
}

@media (min-width: 768px) {
    .contact-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Print Styles */
@media print {
    .whatsapp-float {
        display: none !important;
    }

    header {
        position: static !important;
    }

    .no-print {
        display: none !important;
    }
}