.light-mode {
    --scalar-color-1: #1e293b;
    --scalar-color-2: rgba(30, 41, 59, 0.7);
    --scalar-color-3: rgba(30, 41, 59, 0.5);
    --scalar-color-accent: #3b82f6;
    --scalar-background-1: #ffffff;
    --scalar-background-2: #f8fafc;
    --scalar-background-3: #f1f5f9;
    --scalar-background-accent: #3b82f61a;
    --scalar-border-color: rgba(59, 130, 246, 0.1);
}

.dark-mode {
    --scalar-color-1: rgba(248, 250, 252, 0.9);
    --scalar-color-2: rgba(248, 250, 252, 0.6);
    --scalar-color-3: rgba(248, 250, 252, 0.4);
    --scalar-color-accent: #60a5fa;
    --scalar-background-1: #0f172a;
    --scalar-background-2: #1e293b;
    --scalar-background-3: #334155;
    --scalar-background-accent: #3b82f61f;
}

.light-mode .sidebar {
    --scalar-sidebar-background-1: #ffffff;
    --scalar-sidebar-item-hover-color: #2563eb;
    --scalar-sidebar-item-hover-background: #f8fafc;
    --scalar-sidebar-item-active-background: #eff6ff;
    --scalar-sidebar-border-color: rgba(59, 130, 246, 0.08);
    --scalar-sidebar-color-1: #0f172a;
    --scalar-sidebar-color-2: #64748b;
    --scalar-sidebar-color-active: #2563eb;
    --scalar-sidebar-search-background: #f8fafc;
    --scalar-sidebar-search-border-color: rgba(59, 130, 246, 0.12);
    --scalar-sidebar-search-color: #94a3b8;
}

.dark-mode .sidebar {
    --scalar-sidebar-background-1: #0f172a;
    --scalar-sidebar-item-hover-color: #3b82f6;
    --scalar-sidebar-item-hover-background: #1e293b;
    --scalar-sidebar-item-active-background: #1e40af;
    --scalar-sidebar-border-color: rgba(59, 130, 246, 0.12);
    --scalar-sidebar-color-1: #f8fafc;
    --scalar-sidebar-color-2: #94a3b8;
    --scalar-sidebar-color-active: #3b82f6;
    --scalar-sidebar-search-background: #1e293b;
    --scalar-sidebar-search-border-color: rgba(59, 130, 246, 0.16);
    --scalar-sidebar-search-color: #64748b;
}