/* ==========================================
   VIRD.CLICK - CUTE PASTEL THEME
   Premium & Professional Design System
   ========================================== */

:root {
    /* Primary Pastel Palette */
    --primary: #f8a4d0;
    --primary-light: #fcd5eb;
    --primary-dark: #e878b4;
    --primary-glow: rgba(248, 164, 208, 0.5);
    
    /* Secondary Colors */
    --secondary: #a8d8ea;
    --secondary-light: #d4ecf7;
    --secondary-dark: #7cc0d8;
    
    /* Accent Colors */
    --accent-purple: #d5aaff;
    --accent-mint: #a8e6cf;
    --accent-peach: #ffccbc;
    --accent-yellow: #fff3b0;
    --accent-lavender: #c9b1ff;
    --accent-coral: #ff8a80;
    --accent-sky: #90caf9;
    
    /* Neutral Colors */
    --bg-primary: #fef7fb;
    --bg-secondary: #fff0f7;
    --bg-card: #ffffff;
    --bg-hover: #fce4f0;
    --bg-input: #fdf2f8;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: #2d2d3f;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-inverse: #ffffff;
    --text-link: #e878b4;
    
    /* Status Colors */
    --success: #a8e6cf;
    --success-dark: #4caf50;
    --warning: #fff3b0;
    --warning-dark: #ff9800;
    --error: #ff8a80;
    --error-dark: #f44336;
    --info: #90caf9;
    --info-dark: #2196f3;
    
    /* Coin Colors */
    --coin-free: #ffd700;
    --coin-paid: #ff9500;
    --coin-free-bg: rgba(255, 215, 0, 0.15);
    --coin-paid-bg: rgba(255, 149, 0, 0.15);
    
    /* Verified */
    --verified-color: #60a5fa;
    --verified-glow: 0 0 10px rgba(96, 165, 250, 0.6);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(248, 164, 208, 0.3);
    --shadow-card: 0 2px 12px rgba(248, 164, 208, 0.15);
    
    /* Borders */
    --border-light: #fce4f0;
    --border-medium: #f8c4de;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #f8a4d0, #a8d8ea);
    --gradient-premium: linear-gradient(135deg, #f8a4d0, #d5aaff, #a8d8ea);
    --gradient-gold: linear-gradient(135deg, #ffd700, #ffaa00);
    --gradient-live: linear-gradient(135deg, #ff6b6b, #ff8e53);
    --gradient-success: linear-gradient(135deg, #a8e6cf, #88d8a8);
    --gradient-sunset: linear-gradient(135deg, #f093fb, #f5576c);
    --gradient-ocean: linear-gradient(135deg, #4facfe, #00f2fe);
    --gradient-card: linear-gradient(135deg, #ffffff, #fef7fb);
    
    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Poppins', sans-serif;
    
    /* Z-Index Layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    --z-splash: 900;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Bottom Nav Height */
    --nav-height: 60px;
    --header-height: 56px;
    --stories-height: 90px;
    
    /* Safe Areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #16213e;
    --bg-hover: #1f2940;
    --bg-input: #1a1a2e;
    
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b5;
    --text-tertiary: #6b6b80;
    
    --border-light: #2a2a3e;
    --border-medium: #3a3a4e;
    
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(248, 164, 208, 0.15);
    
    --gradient-card: linear-gradient(135deg, #16213e, #1a1a2e);
}

/* Glow Effects for Titles & Badges */
.glow-rare {
    text-shadow: 0 0 10px var(--accent-purple), 0 0 20px var(--accent-purple), 0 0 40px var(--accent-purple);
    animation: glowPulse 2s ease-in-out infinite alternate;
}

.glow-legendary {
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffaa00, 0 0 40px #ffd700;
    animation: glowPulse 1.5s ease-in-out infinite alternate;
}

.glow-achievement-5 {
    box-shadow: 0 0 10px var(--accent-purple), 0 0 20px rgba(213, 170, 255, 0.3);
}

.glow-achievement-10 {
    box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.4);
    border: 2px solid #ffd700;
}

.glow-verified {
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.8));
}

.glow-name {
    background: linear-gradient(90deg, #f8a4d0, #d5aaff, #a8d8ea, #d5aaff, #f8a4d0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s linear infinite;
}

@keyframes glowPulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}