/* FishConnect Bright Theme - Main Theme File */
/* Import all theme components */

@import url('./variables.css');
@import url('./base.css');
@import url('./animations.css');
@import url('./components.css');

/* External Dependencies */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Theme-specific body styles */
body.fc-bright-theme {
    position: relative;
    overflow-x: hidden;
}

body.fc-bright-theme::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 102, 204, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 168, 204, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(0, 77, 153, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(0, 102, 204, 0.08) 0%, transparent 70%);
    animation: fc-float 25s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

body.fc-bright-theme::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(3px 3px at 25px 35px, rgba(0, 168, 204, 0.3), transparent),
        radial-gradient(2px 2px at 45px 75px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 95px 45px, rgba(0, 102, 204, 0.2), transparent),
        radial-gradient(2px 2px at 135px 85px, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 165px 35px, rgba(0, 77, 153, 0.25), transparent);
    background-repeat: repeat;
    background-size: 220px 120px;
    animation: fc-sparkle 18s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Page-specific layouts */
.fc-page-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fc-space-4);
}

.fc-main-card {
    width: 100%;
    max-width: 500px;
    animation: fc-slideUp 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.fc-main-card-large {
    max-width: 600px;
}

/* Header Styles */
.fc-header {
    background: var(--fc-primary);
    color: var(--fc-text-white);
    padding: var(--fc-space-8) var(--fc-space-6);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fc-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: fc-shine 3s infinite;
    pointer-events: none;
}

.fc-header-title {
    font-size: var(--fc-font-size-4xl);
    font-weight: var(--fc-font-weight-bold);
    margin-bottom: var(--fc-space-2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.fc-header-subtitle {
    opacity: 0.9;
    font-size: var(--fc-font-size-base);
    font-weight: var(--fc-font-weight-normal);
}

/* Content Area */
.fc-content {
    padding: var(--fc-space-8) var(--fc-space-6);
    background: var(--fc-bg-primary);
}

/* Responsive Design */
@media (max-width: 640px) {
    .fc-page-container {
        padding: var(--fc-space-3);
    }
    
    .fc-main-card {
        max-width: 100%;
    }
    
    .fc-header {
        padding: var(--fc-space-6) var(--fc-space-4);
    }
    
    .fc-content {
        padding: var(--fc-space-6) var(--fc-space-4);
    }
    
    .fc-header-title {
        font-size: var(--fc-font-size-3xl);
    }
}

@media (max-width: 480px) {
    .fc-header {
        padding: var(--fc-space-4) var(--fc-space-3);
    }
    
    .fc-content {
        padding: var(--fc-space-4) var(--fc-space-3);
    }
    
    .fc-header-title {
        font-size: var(--fc-font-size-2xl);
    }
}