:root {
    /* BRAND COLORS (NEW) */
    --primary-blue: #7DD3FC;
    --primary-purple: #6366F1;
    --accent-orange: #FF4D00;
    
    --main-gradient: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
    
    --burgundy: var(--primary-purple);
    --burgundy-600: var(--primary-blue);
    --accent: var(--accent-orange);
}

body {
    background-image:
        radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0),
        linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(125, 211, 252, 0.08), rgba(255, 77, 0, 0.08)) !important;
    background-size: 24px 24px, 400% 400% !important;
    background-attachment: fixed !important;
    animation: flowingGradient 20s ease infinite !important;
}

body.light-mode {
    background-image:
        radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0),
        linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(125, 211, 252, 0.04), rgba(255, 77, 0, 0.04)) !important;
}

@keyframes flowingGradient {
    0% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
    100% { background-position: 0 0, 0% 50%; }
}

.title i {
    font-style: italic;
    font-family: inherit;
}