:root {
    --primary-color: #4A90E2;
    --secondary-color: #7F5AF0;
    --accent-color: #2DD4BF;
    --bg-color-rgb: 255, 255, 255;
    --gradient-primary: linear-gradient(120deg, #4A90E2, #7F5AF0);
    --gradient-accent: linear-gradient(120deg, #2DD4BF, #4A90E2);
}

[data-theme="dark"] {
    --bg-color: #0a192f;
    --bg-color-rgb: 10, 25, 47;
    --text-color: #8892b0;
    --heading-color: #ccd6f6;
    --card-bg: rgba(127, 90, 240, 0.05);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-hover-shadow: rgba(0, 0, 0, 0.3);
    --glow-effect: 0 0 20px rgba(127, 90, 240, 0.2);
}

[data-theme="light"] {
    --bg-color: #FFFFFF;
    --bg-color-rgb: 255, 255, 255;
    --text-color: #4A5568;
    --heading-color: #2D3748;
    --card-bg: rgba(127, 90, 240, 0.02);
    --card-border: rgba(74, 144, 226, 0.1);
    --card-hover-shadow: rgba(74, 144, 226, 0.15);
    --glow-effect: 0 0 20px rgba(74, 144, 226, 0.1);
    --gradient-dots: radial-gradient(circle at center, var(--accent-color) 1px, transparent 1px);
    --gradient-mesh: linear-gradient(to right, var(--card-border) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--card-border) 1px, transparent 1px);
}