:root {
    --bg-dark: #0D0D1A;
    --accent-1: #FF3AF2; /* Magenta */
    --accent-2: #00F5D4; /* Cyan */
    --accent-3: #FFE600; /* Yellow */
    --accent-4: #FF6B35; /* Orange */
    --accent-5: #7B2FFF; /* Purple */
    --text-main: #FFFFFF;
    --text-dim: #A0A0B0;
    --card-bg: rgba(255, 255, 255, 0.05);
    --header-height: 70px;
    --transition-smooth: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Background Patterns */
.pattern-dots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -2;
    pointer-events: none;
}

.pattern-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(at 0% 0%, rgba(123, 47, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 58, 242, 0.1) 0px, transparent 50%);
    z-index: -1;
    pointer-events: none;
}

/* Animations */
@keyframes gradientShift {
    to { background-position: 200% center; }
}

.glow-text {
    color: transparent;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientShift 5s infinite linear;
    background-size: 200% auto;
}