/*
Custom Colors for Team3 LovePhoto Theme
Bảng màu mới: Purple & Teal Theme
*/

/* CSS Variables cho bảng màu mới */
:root {
    --primary-color: #8b5cf6;          /* Purple 500 */
    --primary-light: #a78bfa;          /* Purple 400 */
    --primary-dark: #7c3aed;           /* Purple 600 */
    --secondary-color: #14b8a6;        /* Teal 500 */
    --secondary-light: #2dd4bf;        /* Teal 400 */
    --secondary-dark: #0d9488;         /* Teal 600 */
    --accent-color: #f59e0b;           /* Amber 500 */
    --accent-light: #fbbf24;           /* Amber 400 */
    --accent-dark: #d97706;            /* Amber 600 */
    
    /* Text Colors */
    --text-primary: #1e293b;           /* Slate 800 */
    --text-secondary: #64748b;         /* Slate 500 */
    --text-muted: #94a3b8;             /* Slate 400 */
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;           /* Slate 50 */
    --bg-tertiary: #f1f5f9;            /* Slate 100 */
    --bg-accent: #fef3c7;              /* Amber 100 */
    
    /* Border Colors */
    --border-color: #e2e8f0;           /* Slate 200 */
    --border-light: #f1f5f9;           /* Slate 100 */
    --border-dark: #cbd5e1;            /* Slate 300 */
    
    /* Status Colors */
    --success-color: #10b981;          /* Emerald 500 */
    --warning-color: #f59e0b;          /* Amber 500 */
    --error-color: #ef4444;            /* Red 500 */
    --info-color: #3b82f6;             /* Blue 500 */
}

/* Override Tailwind Primary Colors */
.bg-primary-50 { background-color: #faf5ff !important; }
.bg-primary-100 { background-color: #f3e8ff !important; }
.bg-primary-200 { background-color: #e9d5ff !important; }
.bg-primary-300 { background-color: #d8b4fe !important; }
.bg-primary-400 { background-color: #c084fc !important; }
.bg-primary-500 { background-color: #a855f7 !important; }
.bg-primary-600 { background-color: #9333ea !important; }
.bg-primary-700 { background-color: #7c3aed !important; }
.bg-primary-800 { background-color: #6b21a8 !important; }
.bg-primary-900 { background-color: #581c87 !important; }

.text-primary-50 { color: #faf5ff !important; }
.text-primary-100 { color: #f3e8ff !important; }
.text-primary-200 { color: #e9d5ff !important; }
.text-primary-300 { color: #d8b4fe !important; }
.text-primary-400 { color: #c084fc !important; }
.text-primary-500 { color: #a855f7 !important; }
.text-primary-600 { color: #9333ea !important; }
.text-primary-700 { color: #7c3aed !important; }
.text-primary-800 { color: #6b21a8 !important; }
.text-primary-900 { color: #581c87 !important; }

.border-primary-50 { border-color: #faf5ff !important; }
.border-primary-100 { border-color: #f3e8ff !important; }
.border-primary-200 { border-color: #e9d5ff !important; }
.border-primary-300 { border-color: #d8b4fe !important; }
.border-primary-400 { border-color: #c084fc !important; }
.border-primary-500 { border-color: #a855f7 !important; }
.border-primary-600 { border-color: #9333ea !important; }
.border-primary-700 { border-color: #7c3aed !important; }
.border-primary-800 { border-color: #6b21a8 !important; }
.border-primary-900 { border-color: #581c87 !important; }

/* Custom Component Styles */
.lovephoto-category-label {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

.lovephoto-article {
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08) !important;
}

.lovephoto-entry-title {
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.lovephoto-entry-meta i {
    color: var(--primary-color) !important;
}

.lovephoto-entry-content h2,
.lovephoto-entry-content h3,
.lovephoto-entry-content h4 {
    color: var(--primary-dark) !important;
    border-left: 4px solid var(--primary-color) !important;
    padding-left: 1rem !important;
}

.lovephoto-entry-content blockquote {
    border-left: 4px solid var(--secondary-color) !important;
    background: linear-gradient(135deg, #f0fdfa, #ecfdf5) !important;
    color: var(--text-primary) !important;
}

.lovephoto-entry-content a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--primary-light) !important;
    transition: all 0.3s ease !important;
}

.lovephoto-entry-content a:hover {
    color: var(--primary-dark) !important;
    border-bottom-color: var(--primary-color) !important;
}

.lovephoto-tag {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

.lovephoto-tag:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.lovephoto-share-btn {
    transition: all 0.3s ease !important;
}

.lovephoto-share-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.lovephoto-author-bio {
    background: linear-gradient(135deg, #faf5ff, #f0f9ff) !important;
    border: 1px solid var(--border-light) !important;
}

.lovephoto-author-bio a {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

.lovephoto-author-bio a:hover {
    color: var(--primary-dark) !important;
}

.lovephoto-post-navigation a {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

.lovephoto-post-navigation a:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
}

.lovephoto-post-navigation i {
    color: var(--primary-color) !important;
}

.lovephoto-post-navigation a:hover i {
    color: white !important;
}

.lovephoto-related {
    border: 1px solid var(--border-light) !important;
    transition: all 0.3s ease !important;
}

.lovephoto-related:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15) !important;
}

.lovephoto-related h4 a {
    color: var(--text-primary) !important;
    transition: color 0.3s ease !important;
}

.lovephoto-related h4 a:hover {
    color: var(--primary-color) !important;
}

/* Custom Button Styles */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

/* Image Button Styles */
.image-buttons button {
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}

.image-buttons button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lovephoto-entry-title {
        font-size: 1.75rem !important;
    }
    
    .lovephoto-entry-content {
        padding: 1rem !important;
    }
    
    .lovephoto-post-navigation {
        flex-direction: column !important;
    }
}

/* Animation Effects */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lovephoto-article {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover Effects */
.lovephoto-article:hover {
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.12) !important;
}

/* Focus States */
.lovephoto-entry-content a:focus,
.lovephoto-tag:focus,
.lovephoto-share-btn:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
} 

.image-buttons{
    justify-content: center;
    flex-wrap: wrap;
}