/* themes.css */
/* Light Theme (Default) */
:root {
    --bg-color: #f0f4f8;
    --main-text-color: #333;
    --secondary-text-color: #666;
    --box-bg-color: #ffffff;
    --box-border-color: #e0e0e0;
    --highlight-color: #a7c9ff;
    --highlight-shadow-color: rgba(128, 179, 255, 0.7);
    --particle-color: #000000;
    --cursor-color: #a7c9ff;
    --custom-cursor-size: 20px;
    
    background-image: radial-gradient(circle, rgba(0, 0, 0, 1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Dark Theme */
.dark-theme {
    --bg-color: #121212;
    --main-text-color: #f0f0f0;
    --secondary-text-color: #ccc;
    --box-bg-color: #1f1f1f;
    --box-border-color: #333;
    --highlight-color: #5080c0;
    --highlight-shadow-color: rgba(50, 100, 200, 0.7);
    --particle-color: #5080c0;
    --cursor-color: #5080c0;
}

/* Light Blue Theme */
.light-blue-theme {
    --bg-color: #0d1a29;
    --main-text-color: #e0e8f0;
    --secondary-text-color: #aebbc9;
    --box-bg-color: #1b2f42;
    --box-border-color: #3c5d79;
    --highlight-color: #79a6d2;
    --highlight-shadow-color: rgba(121, 166, 210, 0.7);
    --particle-color: #79a6d2;
    --cursor-color: #79a6d2;
}
/* Refined Blurple theme */
.Blurple-theme {
    --bg-color: #1a052f; /* Darker purple for better contrast */
    --main-text-color: #c9a8ff; /* Softer purple for readability */
    --secondary-text-color: #6d8eff; /* Complementary blue */
    --box-bg-color: #2a0a4a; /* Rich purple with transparency */
    --box-border-color: #8a4dcc66; /* Semi-transparent vibrant purple */
    --highlight-color: #3a1d6b; /* Brighter highlight */
    --highlight-shadow-color: rgba(101, 66, 255, 0.4); /* Glowing effect */
    --particle-color: #a67bff; /* Vibrant but not overwhelming */
    --cursor-color: #7d4aff; /* Deep purple-blue */
}












/* Gradient animation */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-color), var(--highlight-shadow-color), var(--bg-color));
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    z-index: -1;
    transition: background 0.5s ease;
}

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