/**
 * Printica - Main Stylesheet
 * Professional corporate gifts catalog
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --brand-blue: #17398A;
    --brand-blue-strong: #11357A;
}

/* ========================================
   Base Styles
   ======================================== */
* { 
    box-sizing: border-box; 
}

body { 
    font-family: 'Inter', sans-serif; 
    transition: background 0.4s ease, color 0.4s ease;
    background: #09090b;
    color: #f4f4f5;
}

/* ========================================
   Light Theme
   ======================================== */
.light {
    background: #ffffff;
    color: #09090b;
}

.light body { 
    background: #ffffff; 
    color: #09090b; 
}

.light .bg-header { 
    background: rgba(255, 255, 255, 0.95); 
    border-bottom: 1px solid #e4e4e7;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}

.light .bg-card { 
    background: #ffffff; 
    border: 1px solid #e4e4e7;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.light .bg-sidebar { 
    background: #f9fafb; 
    border-right: 1px solid #e4e4e7; 
}

.light .bg-ui-element { 
    background: #f3f4f6; 
    color: #111827; 
    border: 1px solid #d1d5db;
}

.light .text-main { 
    color: #09090b; 
}

.light .text-muted { 
    color: #6b7280; 
}

.light .product-card { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.light .product-card:hover { 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: #3b82f6;
}

/* ========================================
   Dark Theme
   ======================================== */
.dark {
    background: #09090b;
    color: #f4f4f5;
}

.dark body { 
    background: #09090b; 
    color: #f4f4f5; 
}

.dark .bg-header { 
    background: rgba(15, 15, 18, 0.95);
    border-bottom: 1px solid #27272a;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
}

.dark .bg-card { 
    background: #18181b;
    border: 1px solid #27272a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.dark .bg-sidebar { 
    background: #09090b;
    border-right: 1px solid #27272a;
}

.dark .bg-ui-element { 
    background: #27272a;
    color: #f4f4f5;
    border: 1px solid #3f3f46;
}

.dark .text-main { 
    color: #f4f4f5; 
}

.dark .text-muted { 
    color: #a1a1aa; 
}

.dark .product-card { 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}

.dark .product-card:hover { 
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
    transform: translateY(-4px);
    border-color: #3b82f6;
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glow {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(47, 111, 228, 0.5); 
    }
    50% { 
        text-shadow: 0 0 40px rgba(47, 111, 228, 0.8); 
    }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

/* Animation Classes */
.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.6s ease-out forwards;
}

/* ========================================
   Parallax Effects
   ======================================== */
.parallax { 
    background-attachment: fixed; 
    background-position: center; 
    background-size: cover;
    position: relative;
}

.parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(47, 111, 228, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* ========================================
   Vue Transitions
   ======================================== */
.fade-enter-active, 
.fade-leave-active { 
    transition: opacity 0.3s ease; 
}

.fade-enter-from, 
.fade-leave-to { 
    opacity: 0; 
}

/* ========================================
   Scrollbar Styling
   ======================================== */
::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: var(--brand-blue); 
    border-radius: 10px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover { 
    background: var(--brand-blue-strong); 
}

/* ========================================
   Interactive Elements
   ======================================== */
button, a { 
    transition: all 0.3s ease; 
}

button:hover { 
    transform: translateY(-2px);
}

/* ========================================
   Sections
   ======================================== */
section { 
    position: relative; 
}

.feature-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-8px);
}