@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    /* Brand Colors */
    --vvrc-primary: #7C3AED;        /* Purple main accent */
    --vvrc-primary-rgb: 124, 58, 237;
    --vvrc-primary-dark: #6D28D9;   /* Deep purple */
    --vvrc-secondary: #2563EB;      /* Blue secondary accent */
    --vvrc-secondary-rgb: 37, 99, 235;
    --vvrc-accent-gold: #F59E0B;    /* Gold highlight */
    --vvrc-accent-green: #10B981;   /* WhatsApp green */
    
    /* Gradients */
    --vvrc-grad-primary: linear-gradient(135deg, var(--vvrc-primary) 0%, var(--vvrc-secondary) 100%);
    --vvrc-grad-dark: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%);
    --vvrc-grad-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);

    /* Theme Surfaces (Light Mode default) */
    --vvrc-bg: #FFFFFF;
    --vvrc-bg-alt: #F8FAFC;
    --vvrc-card-bg: #FFFFFF;
    --vvrc-border: #E2E8F0;
    --vvrc-text: #1E293B;
    --vvrc-text-muted: #64748B;
    --vvrc-glass-bg: rgba(255, 255, 255, 0.75);
    --vvrc-glass-border: rgba(226, 232, 240, 0.8);
    
    /* Typography */
    --vvrc-ff-heading: 'Outfit', sans-serif;
    --vvrc-ff-body: 'Inter', sans-serif;

    /* Shadow tokens */
    --vvrc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --vvrc-shadow-md: 0 10px 20px rgba(124, 58, 237, 0.08);
    --vvrc-shadow-lg: 0 20px 40px rgba(124, 58, 237, 0.15);
    --vvrc-shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

[data-theme="dark"] {
    --vvrc-bg: #090D1A;
    --vvrc-bg-alt: #0F172A;
    --vvrc-card-bg: #1E293B;
    --vvrc-border: #334155;
    --vvrc-text: #F8FAFC;
    --vvrc-text-muted: #94A3B8;
    --vvrc-glass-bg: rgba(15, 23, 42, 0.75);
    --vvrc-glass-border: rgba(51, 65, 85, 0.8);
}

/* Micro-Animation Framework */

/* Smooth Card Hover lifts */
.vvrc-hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.vvrc-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--vvrc-shadow-lg);
}

/* Glassmorphism Classes */
.vvrc-glass {
    background: var(--vvrc-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--vvrc-glass-border);
    box-shadow: var(--vvrc-shadow-glass);
}

/* Shimmer Button Effect */
.vvrc-btn-shimmer {
    position: relative;
    overflow: hidden;
}
.vvrc-btn-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(30deg);
    transition: none;
    animation: vvrc-shimmer 4s infinite linear;
}
@keyframes vvrc-shimmer {
    0% { left: -60%; }
    30% { left: 140%; }
    100% { left: 140%; }
}

/* Text Gradients */
.vvrc-text-gradient {
    background: var(--vvrc-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Typing Cursor */
.vvrc-cursor {
    display: inline-block;
    width: 3px;
    background-color: var(--vvrc-accent-gold);
    margin-left: 4px;
    animation: vvrc-blink 0.8s infinite;
}
@keyframes vvrc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 3D Bento Hover Effect */
.vvrc-bento-card {
    border-radius: 20px;
    background: var(--vvrc-bg-alt);
    border: 1px solid var(--vvrc-border);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.vvrc-bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--vvrc-grad-primary);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}
.vvrc-bento-card:hover::before {
    opacity: 0.05;
}
.vvrc-bento-card:hover {
    border-color: var(--vvrc-primary);
}