.light-mode {

    --scalar-color-1: #0f172a; /* slate-900 */
    --scalar-color-2: #334155; /* slate-700 */
    --scalar-color-3: #64748b; /* slate-500 */
    --scalar-color-accent: #4f46e5; /* indigo-600 */
    --scalar-background-1: #ffffff; /* white */
    --scalar-background-2: #f8fafc; /* slate-50 */
    --scalar-background-3: #f1f5f9; /* slate-100 */
    --scalar-background-accent: rgba(79, 70, 229, 0.1);
    --scalar-border-color: #e2e8f0; /* slate-200 */
}

.dark-mode {
    --scalar-color-1: #ffffff; /* white */
    --scalar-color-2: #94a3b8; /* slate-400 */
    --scalar-color-3: #64748b; /* slate-500 */
    --scalar-color-accent: #6366f1; /* indigo-500 */
    --scalar-background-1: #0f172a; /* slate-900 */
    --scalar-background-2: #1e293b; /* slate-800 */
    --scalar-background-3: #334155; /* slate-700 */
    --scalar-background-accent: rgba(99, 102, 241, 0.15);
    --scalar-border-color: #334155; /* slate-700 */
}