/* Main CSS for Switchfin Corporate Site */

/* Custom utility classes */
    /* Gradient text effect */
    .gradient-text {
        background: linear-gradient(135deg, #FF715B 0%, #A6D4FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Hover lift effect */
    .hover-lift {
        @apply transition-all duration-300 ease-out;
    }
    
    .hover-lift:hover {
        @apply -translate-y-1 shadow-xl;
    }
    
    /* Focus styles for forms */
    .form-input {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-blue focus:border-transparent;
    }
    
    /* Button styles */
    .btn-primary {
        @apply bg-cta-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-cta-hover transition-colors;
    }
    
    .btn-secondary {
        @apply bg-white text-brand-primary px-6 py-3 rounded-lg font-semibold border-2 border-gray-200 hover:border-accent-blue transition-colors;
    }
}

/* Mermaid diagram styling */
.mermaid {
    display: flex;
    justify-content: center;
    background: transparent;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Animation keyframes */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Code block styling (for developer section) */
pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto;
}

code {
    @apply font-mono text-sm;
}

/* Responsive navigation */
@media (max-width: 768px) {
    .mobile-menu-open {
        @apply block;
    }
}

/* Loading states */
.loading {
    @apply opacity-50 pointer-events-none;
}

/* Form validation states */
.input-error {
    @apply border-red-500 focus:ring-red-500;
}

.input-success {
    @apply border-green-500 focus:ring-green-500;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300;
}

.card-hover:hover {
    @apply transform -translate-y-1 shadow-lg;
}

/* Section spacing */
.section-padding {
    @apply py-16 md:py-20;
}

/* Container sizing */
.container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8;
}

.container-wide {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Typography */
.heading-1 {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold text-brand-primary;
}

.heading-2 {
    @apply text-3xl md:text-4xl font-bold text-brand-primary;
}

.heading-3 {
    @apply text-2xl md:text-3xl font-semibold text-brand-primary;
}

.body-large {
    @apply text-lg md:text-xl text-text-secondary;
}

.body-regular {
    @apply text-base text-text-secondary;
}

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

.badge-success {
    @apply bg-accent-mint/20 text-green-700 border border-accent-mint/30;
}

.badge-info {
    @apply bg-accent-blue/20 text-blue-700 border border-accent-blue/30;
}

/* Architecture diagram custom styles */
.architecture-node {
    @apply p-4 rounded-lg text-center font-medium;
}

.architecture-gateway {
    @apply bg-accent-blue/20 text-brand-primary border-2 border-accent-blue;
}

.architecture-compliance {
    @apply bg-accent-mint/20 text-brand-primary border-2 border-green-500;
}

.architecture-risk {
    @apply bg-accent-mint/20 text-brand-primary border-2 border-green-500;
}

.architecture-execution {
    @apply bg-accent-blue/20 text-brand-primary border-2 border-accent-blue;
}

.architecture-memory {
    @apply bg-accent-coral/20 text-brand-primary border-2 border-cta-primary;
}