/* KOJIE AI - OCEAN DEPTHS THEME */
/* Inspired by deep ocean trenches and bioluminescent creatures */

:root {
    /* Ocean Color Palette - Mathematical Harmony */
    --ocean-primary: #00d4ff;
    --ocean-primary-rgb: 0, 212, 255;
    --ocean-secondary: #0088cc;
    --ocean-secondary-rgb: 0, 136, 204;
    --ocean-accent: #00ffcc;
    --ocean-accent-rgb: 0, 255, 204;
    --ocean-teal: #008899;
    --ocean-deep: #003344;
    
    /* Ocean Background Gradients */
    --ocean-bg-primary: rgba(0, 15, 25, 0.98);
    --ocean-bg-secondary: rgba(0, 30, 50, 0.95);
    --ocean-bg-tertiary: rgba(0, 45, 75, 0.9);
    
    --ocean-bg-gradient: linear-gradient(135deg, 
        rgba(0, 20, 35, 0.98) 0%,
        rgba(0, 40, 65, 0.96) 25%,
        rgba(0, 60, 95, 0.94) 50%,
        rgba(0, 45, 75, 0.95) 75%,
        rgba(0, 25, 45, 0.97) 100%
    );
    
    /* Text Colors */
    --ocean-text-primary: #e0f7ff;
    --ocean-text-secondary: rgba(0, 212, 255, 0.9);
    --ocean-text-muted: rgba(0, 136, 204, 0.7);
    --ocean-text-glow: var(--ocean-primary);
}

/* Ocean Body Background */
body[data-theme="ocean"] {
    background: var(--ocean-bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Bioluminescent Glow Effect */
body[data-theme="ocean"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at top,
        rgba(0, 255, 204, 0.08) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: -1;
}

/* Ocean Wave Animation */
body[data-theme="ocean"]::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(
        to top,
        rgba(0, 136, 204, 0.15) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: -1;
    animation: ocean-wave 8s ease-in-out infinite;
}

@keyframes ocean-wave {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* Ocean Cards */
body[data-theme="ocean"] .card,
body[data-theme="ocean"] .elegant-card {
    background: rgba(0, 40, 65, 0.6) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="ocean"] .card:hover,
body[data-theme="ocean"] .elegant-card:hover {
    border-color: var(--ocean-primary) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2) !important;
}

/* Ocean Buttons */
body[data-theme="ocean"] .btn-primary,
body[data-theme="ocean"] .btn-innovation-primary {
    background: linear-gradient(135deg, var(--ocean-primary), var(--ocean-secondary)) !important;
    border: none !important;
    color: #000 !important;
}

body[data-theme="ocean"] .btn-primary:hover,
body[data-theme="ocean"] .btn-innovation-primary:hover {
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4) !important;
}

/* Ocean Text */
body[data-theme="ocean"] {
    color: var(--ocean-text-primary) !important;
}

body[data-theme="ocean"] h1,
body[data-theme="ocean"] h2,
body[data-theme="ocean"] h3 {
    color: var(--ocean-primary) !important;
}

/* Ocean Navbar */
body[data-theme="ocean"] .navbar {
    background: rgba(0, 30, 50, 0.95) !important;
    border-bottom: 2px solid var(--ocean-primary) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="ocean"] .navbar .nav-link {
    color: var(--ocean-text-primary) !important;
}

body[data-theme="ocean"] .navbar .nav-link:hover {
    color: var(--ocean-primary) !important;
}