/**
 * BDS Page Color System
 * 각 페이지별 통일된 색상 팔레트
 */

/* ========================================
   COLOR PALETTE VARIABLES
======================================== */
:root {
    /* Primary Blue - Services, Home */
    --color-blue-start: #0EA5E9;
    --color-blue-mid: #3B82F6;
    --color-blue-end: #06B6D4;
    --gradient-blue: linear-gradient(135deg, #0EA5E9 0%, #3B82F6 50%, #06B6D4 100%);
    
    /* Green - Resources, Management */
    --color-green-start: #10B981;
    --color-green-mid: #059669;
    --color-green-end: #34D399;
    --gradient-green: linear-gradient(135deg, #10B981 0%, #059669 50%, #34D399 100%);
    
    /* Gray - Resources Alternative */
    --color-gray-start: #64748b;
    --color-gray-mid: #475569;
    --color-gray-end: #94a3b8;
    --gradient-gray: linear-gradient(135deg, #64748b 0%, #475569 50%, #94a3b8 100%);
    
    /* Purple - Partners */
    --color-purple-start: #8B5CF6;
    --color-purple-mid: #6366F1;
    --color-purple-end: #A855F7;
    --gradient-purple: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #A855F7 100%);
    
    /* Blue-Purple - Updates */
    --color-updates-start: #0EA5E9;
    --color-updates-mid: #3B82F6;
    --color-updates-end: #8B5CF6;
    --gradient-updates: linear-gradient(135deg, #0EA5E9 0%, #3B82F6 50%, #8B5CF6 100%);
    
    /* Pink - Events */
    --color-pink-start: #EC4899;
    --color-pink-mid: #DB2777;
    --color-pink-end: #F472B6;
    --gradient-pink: linear-gradient(135deg, #EC4899 0%, #DB2777 50%, #F472B6 100%);
}

/* ========================================
   CARD ICON COLORS - CONSISTENT SYSTEM
======================================== */

/* Blue Theme Cards */
.card-icon-blue,
.page-services .card-icon,
.page-home .card-icon {
    background: var(--gradient-blue) !important;
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.25) !important;
}

.card-icon-blue:hover,
.page-services .card:hover .card-icon,
.page-home .card:hover .card-icon {
    box-shadow: 0 20px 48px rgba(14, 165, 233, 0.35) !important;
}

/* Green Theme Cards */
.card-icon-green,
.page-management .card-icon {
    background: var(--gradient-green) !important;
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.25) !important;
}

.card-icon-green:hover,
.page-management .card:hover .card-icon {
    box-shadow: 0 20px 48px rgba(16, 185, 129, 0.35) !important;
}

/* Gray Theme Cards - Resources */
.card-icon-gray,
.page-resources .card-icon,
.page-resources .resource-icon {
    background: var(--gradient-gray) !important;
    box-shadow: 0 12px 32px rgba(100, 116, 139, 0.25) !important;
}

.card-icon-gray:hover,
.page-resources .card:hover .card-icon,
.page-resources .card:hover .resource-icon {
    box-shadow: 0 20px 48px rgba(100, 116, 139, 0.35) !important;
}

/* Ensure hero text is white on gray background */
.page-resources .hero-title,
.page-resources .hero-subtitle,
.page-resources .hero-badge,
.page-resources .hero-feature-title,
.page-resources .hero-feature-desc {
    color: white !important;
}

/* Purple Theme Cards */
.card-icon-purple,
.page-partners .card-icon {
    background: var(--gradient-purple) !important;
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25) !important;
}

.card-icon-purple:hover,
.page-partners .card:hover .card-icon {
    box-shadow: 0 20px 48px rgba(139, 92, 246, 0.35) !important;
}

/* Updates Theme Cards */
.card-icon-updates,
.page-updates .card-icon {
    background: var(--gradient-updates) !important;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.25) !important;
}

.card-icon-updates:hover,
.page-updates .card:hover .card-icon {
    box-shadow: 0 20px 48px rgba(59, 130, 246, 0.35) !important;
}

/* ========================================
   SECTION BADGE COLORS
======================================== */

/* Blue Badge */
.section-badge-blue,
.page-services .section-badge,
.page-home .section-badge {
    background: var(--gradient-blue) !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
}

/* Green Badge */
.section-badge-green,
.page-management .section-badge {
    background: var(--gradient-green) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
}

/* Gray Badge - Resources */
.section-badge-gray,
.page-resources .section-badge {
    background: var(--gradient-gray) !important;
    box-shadow: 0 4px 16px rgba(100, 116, 139, 0.25) !important;
}

/* Purple Badge */
.section-badge-purple,
.page-partners .section-badge {
    background: var(--gradient-purple) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25) !important;
}

/* Updates Badge */
.section-badge-updates,
.page-updates .section-badge {
    background: var(--gradient-updates) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25) !important;
}

/* Pink Badge - Events */
.section-badge-pink,
.page-events .section-badge {
    background: var(--gradient-pink) !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.25) !important;
}

/* Pink Theme Cards */
.card-icon-pink,
.page-events .card-icon,
.page-events .event-icon {
    background: var(--gradient-pink) !important;
    box-shadow: 0 12px 32px rgba(236, 72, 153, 0.25) !important;
}

.card-icon-pink:hover,
.page-events .card:hover .card-icon,
.page-events .card:hover .event-icon {
    box-shadow: 0 20px 48px rgba(236, 72, 153, 0.35) !important;
}

/* ========================================
   BUTTON COLORS - CONSISTENT WITH THEME
======================================== */

/* Blue Buttons */
.btn-theme-blue,
.page-services .btn-primary,
.page-home .btn-primary {
    background: var(--gradient-blue) !important;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25) !important;
}

.btn-theme-blue:hover,
.page-services .btn-primary:hover,
.page-home .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(14, 165, 233, 0.35) !important;
}

/* Green Buttons */
.btn-theme-green,
.page-management .btn-primary {
    background: var(--gradient-green) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25) !important;
}

.btn-theme-green:hover,
.page-management .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35) !important;
}

/* Gray Buttons - Resources */
.btn-theme-gray,
.page-resources .btn-primary {
    background: var(--gradient-gray) !important;
    box-shadow: 0 8px 24px rgba(100, 116, 139, 0.25) !important;
}

.btn-theme-gray:hover,
.page-resources .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(100, 116, 139, 0.35) !important;
}

/* Purple Buttons */
.btn-theme-purple,
.page-partners .btn-primary {
    background: var(--gradient-purple) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25) !important;
}

.btn-theme-purple:hover,
.page-partners .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(139, 92, 246, 0.35) !important;
}

/* Updates Buttons */
.btn-theme-updates,
.page-updates .btn-primary {
    background: var(--gradient-updates) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25) !important;
}

.btn-theme-updates:hover,
.page-updates .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(59, 130, 246, 0.35) !important;
}

/* Pink Buttons - Events */
.btn-theme-pink,
.page-events .btn-primary {
    background: var(--gradient-pink) !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25) !important;
}

.btn-theme-pink:hover,
.page-events .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(236, 72, 153, 0.35) !important;
}

/* ========================================
   HOVER EFFECTS - CONSISTENT BORDERS
======================================== */

.page-services .card:hover {
    border-color: var(--color-blue-start) !important;
}

.page-resources .card:hover {
    border-color: var(--color-gray-start) !important;
}

.page-management .card:hover {
    border-color: var(--color-green-start) !important;
}

.page-partners .card:hover {
    border-color: var(--color-purple-start) !important;
}

.page-updates .card:hover {
    border-color: var(--color-updates-mid) !important;
}

.page-events .card:hover,
.page-events .event-card:hover {
    border-color: var(--color-pink-start) !important;
}

/* ========================================
   ACCENT COLORS FOR INLINE ELEMENTS
======================================== */

.accent-blue {
    color: var(--color-blue-start) !important;
}

.accent-green {
    color: var(--color-green-start) !important;
}

.accent-purple {
    color: var(--color-purple-start) !important;
}

.accent-pink {
    color: var(--color-pink-start) !important;
}

.bg-accent-blue {
    background: var(--gradient-blue) !important;
}

.bg-accent-green {
    background: var(--gradient-green) !important;
}

.bg-accent-purple {
    background: var(--gradient-purple) !important;
}

.bg-accent-pink {
    background: var(--gradient-pink) !important;
}

/* ========================================
   CATEGORY BADGE COLORS (for update cards)
======================================== */

.category-badge-new {
    background: var(--gradient-blue) !important;
}

.category-badge-update {
    background: var(--gradient-purple) !important;
}

.category-badge-service {
    background: var(--gradient-green) !important;
}

.category-badge-partner {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

/* ========================================
   FILTER BUTTON COLORS (for service/resource pages)
======================================== */

.filter-btn.active,
.filter-chip.active {
    background: var(--gradient-blue) !important;
    color: white !important;
    border-color: transparent !important;
}

.page-resources .filter-btn.active,
.page-resources .filter-chip.active {
    background: var(--gradient-gray) !important;
    border-color: var(--color-gray-start) !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(100, 116, 139, 0.3) !important;
}

.page-management .filter-btn.active,
.page-management .filter-chip.active {
    background: var(--gradient-green) !important;
    border-color: var(--color-green-start) !important;
}

.page-partners .filter-btn.active,
.page-partners .filter-chip.active {
    background: var(--gradient-purple) !important;
    border-color: var(--color-purple-start) !important;
}

.page-updates .filter-btn.active,
.page-updates .filter-chip.active {
    background: var(--gradient-updates) !important;
    border-color: var(--color-updates-mid) !important;
}

.page-events .filter-btn.active,
.page-events .filter-chip.active {
    background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3) !important;
}

/* Search Icon Colors */
.page-services .search-icon,
.page-home .search-icon {
    color: var(--color-blue-start) !important;
}

.page-resources .search-icon {
    color: var(--color-gray-start) !important;
}

.page-management .search-icon {
    color: var(--color-green-start) !important;
}

.page-partners .search-icon {
    color: var(--color-purple-start) !important;
}

.page-updates .search-icon {
    color: var(--color-updates-mid) !important;
}

/* Input Focus Colors */
.page-services .search-input:focus,
.page-home .search-input:focus {
    border-color: var(--color-blue-start) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1) !important;
}

.page-resources .search-input:focus {
    border-color: var(--color-gray-start) !important;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.1) !important;
}

.page-management .search-input:focus {
    border-color: var(--color-green-start) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

.page-partners .search-input:focus {
    border-color: var(--color-purple-start) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1) !important;
}

.page-updates .search-input:focus {
    border-color: var(--color-updates-mid) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}