/* ===== MODERN THEME WITH #1d3d8a ===== */

/* Enhanced color variations for modern navy theme */
:root {
    /* Primary color tints (modern navy scale) */
    --primary-50: #f0f4ff;
    --primary-100: #e0e9ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #1d3d8a;
    --primary-800: #152c6b;
    --primary-900: #0f1f4c;
    
    /* Modern gradients with sophisticated navy harmony */
    --gradient-primary-soft: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    --gradient-primary-vibrant: linear-gradient(135deg, var(--primary-color), var(--primary-light), #4f46e5);
    --gradient-background: linear-gradient(135deg, var(--gray-50), var(--white));
    --gradient-card: linear-gradient(145deg, var(--white), var(--primary-50));
    
    /* Modern shadows with navy primary color */
    --shadow-primary: 0 4px 14px 0 rgba(29, 61, 138, 0.15);
    --shadow-primary-lg: 0 10px 25px -3px rgba(29, 61, 138, 0.2), 0 4px 6px -2px rgba(29, 61, 138, 0.1);
    --shadow-primary-xl: 0 20px 30px -5px rgba(29, 61, 138, 0.25), 0 10px 15px -5px rgba(29, 61, 138, 0.15);
    
    /* Glass effect with modern navy theme */
    --glass-primary: rgba(29, 61, 138, 0.1);
    --glass-primary-border: rgba(29, 61, 138, 0.2);
    
    /* Modern hover states */
    --primary-hover: #2d4da3;
    --primary-active: #1d3d8a;
}

/* Enhanced button styles with new theme */
.btn-primary-soft {
    background: var(--gradient-primary-soft);
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-primary);
}

.btn-primary-soft:hover {
    background: var(--gradient-primary);
    box-shadow: var(--shadow-primary-lg);
    transform: translateY(-2px);
    color: var(--white);
}

.btn-primary-vibrant {
    background: var(--gradient-primary-vibrant);
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-primary-lg);
    position: relative;
    overflow: hidden;
}

.btn-primary-vibrant::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.btn-primary-vibrant:hover::before {
    left: 100%;
}

.btn-primary-vibrant:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary-xl);
    color: var(--white);
}

/* Enhanced card styles */
.card-theme {
    background: var(--gradient-card);
    border: 1px solid var(--primary-100);
    box-shadow: var(--shadow-primary);
    position: relative;
    overflow: hidden;
}

.card-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary-vibrant);
}

.card-theme:hover {
    box-shadow: var(--shadow-primary-lg);
    transform: translateY(-2px);
    border-color: var(--primary-200);
}

/* Glass morphism with theme */
.glass-theme {
    background: var(--glass-primary);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-primary-border);
    border-radius: var(--radius-xl);
}

/* Enhanced article cards with theme */
.article-card-theme {
    background: var(--white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-primary);
    border: 1px solid var(--primary-100);
    transition: all var(--transition-normal);
}

.article-card-theme:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-primary-xl);
    border-color: var(--primary-200);
}

.article-card-theme .article-category {
    background: var(--gradient-primary);
    color: var(--white);
}

/* Modern hero with navy theme */
.hero-theme {
    background: var(--gradient-hero);
    position: relative;
}

.hero-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(29, 61, 138, 0.2) 100%);
    pointer-events: none;
}

/* Section backgrounds with theme */
.section-theme-light {
    background: var(--gradient-background);
}

.section-theme-accent {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    position: relative;
}

.section-theme-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}

/* Enhanced navigation with theme */
.nav-theme .nav-link:hover,
.nav-theme .nav-link.active {
    color: var(--primary-color);
    background: var(--primary-50);
}

.nav-theme .nav-link::after {
    background: var(--gradient-primary);
}

/* Modern footer with navy theme */
.footer-theme {
    background: linear-gradient(135deg, var(--gray-800), var(--primary-800));
}

.footer-theme::before {
    background: var(--gradient-primary-vibrant);
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .btn-primary-vibrant,
    .btn-primary-soft {
        padding: 0.875rem 1.5rem;
        font-size: var(--font-size-sm);
    }
    
    .card-theme {
        margin-bottom: var(--spacing-lg);
    }
    
    .article-card-theme {
        margin-bottom: var(--spacing-md);
    }
}