.light-mode {
    --scalar-color-1: #121212; /* Dark text */
    --scalar-color-2: rgba(0, 0, 0, 0.8); /* Secondary dark text */
    --scalar-color-3: rgba(0, 0, 0, 0.6); /* Tertiary dark text */
    --scalar-color-accent: #c2185b; /* Deep pink accent for text */
    --scalar-background-1: #ffffff; /* White background */
    --scalar-background-2: #fdf6f9; /* Light pink tint */
    --scalar-background-3: #faeaf2; /* Medium pink tint */
    --scalar-background-accent: #c2185b0f; /* Deep pink accent */
    --scalar-border-color: rgba(194, 24, 91, 0.15); /* Deep pink border */
}

.dark-mode {
    --scalar-color-1: rgba(255, 255, 255, 0.9); /* Light text */
    --scalar-color-2: rgba(255, 255, 255, 0.7); /* Secondary light text */
    --scalar-color-3: rgba(255, 255, 255, 0.5); /* Tertiary light text */
    --scalar-color-accent: #c2185b; /* Deep pink for accent text */
    --scalar-background-1: #1a1a2e; /* Dark background with purple tint */
    --scalar-background-2: #2d1b3d; /* Deeper purple */
    --scalar-background-3: #3d1f4d; /* Even deeper purple */
    --scalar-background-accent: #c2185b1f; /* Deep pink accent */
    --scalar-border-color: rgba(194, 24, 91, 0.3); /* Deep pink border */
}