/* ===========================================
   CSS STYLES - DESIGN SYSTEM & VARIABLES
   =========================================== */

:root {
    --primary: #007bff;
    --primary-hover: #0056b3;
    --secondary: #6c757d;
    --secondary-hover: #545b62;
}

.bg-primary { background-color: var(--primary) !important; }
.bg-primary-hover:hover { background-color: var(--primary-hover) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-secondary-hover:hover { background-color: var(--secondary-hover) !important; }
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Background gradient (kept for hero section background) */
.gradient-bg {
    background: linear-gradient(135deg, var(--primary), #6f42c1);
}

.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(0,123,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,123,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Custom utilities for Bootstrap */
.min-vh-100 { min-height: 100vh; }
.backdrop-blur { backdrop-filter: blur(8px); }
.mix-blend-multiply { mix-blend-mode: multiply; }
.filter-blur { filter: blur(48px); }

/* ===========================================
   CSS STYLES - NAVIGATION
   =========================================== */

.nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Logo styling */
.logo-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* ===========================================
   CSS STYLES - TOAST NOTIFICATIONS
   =========================================== */

.toast {
    position: fixed;
    top: 65px;
    right: 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateX(400px);
    transition: transform 0.3s ease;
    z-index: 1000;
}

.toast.show {
    transform: translateX(0);
}

/* ===========================================
   CSS STYLES - ANIMATIONS
   =========================================== */

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hover-scale {
    transition: transform 0.2s;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Custom spacing and sizing */
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-72 { width: 18rem; }
.h-72 { height: 18rem; }